VUE +のaxiosは+ antD階段状ピットの写真をアップロード

実験室の首長パッケージaxiosを使用して起動しFORMDATAが写真をアップロード組み合わせることが、しかしFORMDATAが背景に渡された空で、フォームをプリントアウトし、存在しない、Baiduは大プッシュを検索し、その後、Baiduの練習を描きます。

引入axios 1.    'axios'からインポートaxios。

2.新しいaxiosを作成し、

インスタンスaxios.create =一定（{
withCredentials：// trueに使用するか否かを示すときに、クロスドメイン要求資格情報、デフォルトはfalse
}）

instance.post（ 'URL'、FORMDATA）.then（RES => {
}）
.catch（ERR => {
にconsole.log（ERR）
}）

そして、あなたはFORMDATAが出て、少し幸せ、直ちに次のアップロードの写真を試す見ることができますが、次のようにまだ渡された背景画像、画像値を受け取っていません

その後、私はbase64でエンコードされた画像を送信したことを知っている背景の議論で、背景は彼がBASE64形式にファイルを変換するには、Baiduのため、ファイルオブジェクトを受け取るために必要です。

次のように完全なコードです

            写真を追加する（）{
              自己ましょう = この
              constのフォーム = 新しい）（いるFormDataを
              self.fileList.forEach（（ファイル） => {    // アップロードするファイルの配列であるのfileList 
                  self.imageUrl = file.url || file.thumbUrl
                  form.append（ '画像' 、self.dataURLtoFile（self.imageUrl、file.name））
              }）;
              form.append（ 'seedbedId' 、self.seedbedId）
              CONSTインスタンス = axios.create（{
                  withCredentials：真
              }）
              instance.post（ 'URL'、フォーム）.then（RES => {
                   場合（res.data.codeの=== 2000 ）{
                      console.log（res.data.message）
                  } 他{
                      console.log（res.data.message）
                  }
              }）
              。キャッチ（ERR => {
                  console.log（ERR）
              }）
            }、
            dataURLtoFile（dataUrl、ファイル名）{ // BASE64ファイルに変換
                するvar ARRを= dataurl.split（ ''）、MIME ARR = [0] .match（/：？（*）; /）[1 ]
                BSTR = ATOB（ARR [1]）、N = bstr.length、u8arr = 新しいUint8Array（N）
                一方、（N-- ）{
                    u8arr [N] = bstr.charCodeAt（N）。
                }
                戻り 新しいファイル（[u8arr]、ファイル名を、{タイプ：MIME}）。
            }、

したがって、最後に写真をアップロード