一開始使用了實驗室大佬封裝的axios結合formData進行圖片上傳，然而傳遞給后臺的formData是空的,打印出來的form又確實是存在的，百度搜了一大推，于是借鑒了百度的做法。

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= thisconst form= newFormData()

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 = newUint8Array(n);while(n--){

u8arr[n]=bstr.charCodeAt(n);

}return newFile([u8arr], filename, {type:mime});

},

至此上傳圖片告一段落

原文：https://www.cnblogs.com/ruilin/p/11298936.html

總結

以上是生活随笔為你收集整理的antd vue表单上传文件_vue+axios+antD的上传图片踩坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。