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 = 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