キャンバスによって取得された画像や WeChat 開発 SDK によって返された画像などの一部のシナリオは、それらをサーバーにアップロードしてから変換する必要があります。
dataURL を BLOB に変換する
// Base64 を blobdataURItoBlob(dataURI) に変換します { // Base64/URLEncoded データ コンポーネントを文字列に保持されている生のバイナリ データに変換します let byteString; if (dataURI.split(',')[0].indexOf('base64') > = 0) { byteString = atob(dataURI.split(',')[1]) } else byteString = unescape(dataURI.split(',')[1]); // MIME コンポーネントを分離する const mimeString = dataURI .split(',')[0] .split(':')[1] .split(' ;')[0]; // 文字列のバイトを型付き配列に書き込みます const ia = new Uint8Array(byteString.length) for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i) } 新しい Blob([ia], { type: mimeString });} を返します。ビルドフォームアップロードフォーム
const blob = dataURItoBlob(imgDataUrl); const formData = new FormData();// formData.append('auth', state.token.auth); オプションで認証を追加できます formData.append('file', blob );データをアップロードするには、 axiosconst params = { url: '/store/file', payload: formData }; を使用します。 this.upload(params);axios をカプセル化しました
import const Upload = (params) => { const { url, payload } = params return axios.post(url, payload, { headers: { 'Content-Type': 'multipart/form-data' } }).then( x => x.data)}以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。