一开始使用了实验室大佬封装的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 = 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}); },
至此上传图片告一段落
原文：https://www.cnblogs.com/ruilin/p/11298936.html