vue+axios+antD的上傳圖片踩坑

axios以formData的形式進行圖片上傳，然而傳遞給后台的formData是空的,打印出來的form又確實是存在的。

一開始想的是在請求頭添加'Content-Type':'multipart/form-data',但是發現並沒有用。

翻閱了axios的文檔，也沒有找到相關問題的解釋。於是開啟了面向百度之路，說是axios的配置不純凈，並且要設置withCredentials:true。

於是就在問題頁面創建一個新的axios實例，具體步驟如下：

1.引入axios    import axios from 'axios';

2.創建一個新的axios,

const instance = axios.create({
　　withCredentials:true  //表示跨域請求時是否需要使用憑證，默認為false
})

instance.post('url',formData).then(res=>{
})
.catch(err=>{
console.log(err)
})

這時可以看到formData出來了,有點小開心，於是馬上試了下上傳圖片，但是后台還是沒有收到圖片，傳遞的image值如下

然后跟后台的一番討論才知道我傳的是圖片的base64編碼，后台需要接收的是file文件對象，於是又百度一下，將base64轉換成file形式.

完整代碼如下

            addPhoto(){
              let self = this
              const form = new FormData()
              self.fileList.forEach((file) => {   // fileList 是要上傳的文件數組
                  self.imageUrl = file.url || file.thumbUrl
                  form.append('image', self.dataURLtoFile(self.imageUrl,file.name))
              });
              form.append('seedbedId', self.seedbedId)
              const instance = axios.create({
                  withCredentials:true
              })
              instance.post('url',form).then(res=>{
                  if(res.data.code===2000){
                      console.log(res.data.message)
                  }else{
                      console.log(res.data.message)
                  }
              })
              .catch(err=>{
                  console.log(err)
              })
            },
            dataURLtoFile(dataurl, filename) {//將base64轉換為文件
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, {type:mime});
            },

至此上傳圖片告一段落