antd vue表单上传文件_vue+axios+antD的上传图片踩坑

一开始使用了实验室大佬封装的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