axios如何提交post请求的表单 并且传的是图片格式？

Question

axios如何提交post请求的表达 并且传的是图片格式？

服务器接受一个以avatar为name的post表单

我如下写：

this.axios({
                    url: this.baseUrl + '/uploadImg',
                    method: 'post',
                    data: {avatar: formdata},
                    // transformRequest: [function (data) {
                    //     let ret = ''
                    //     for (let it in data) {
                    //         ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                    //     }
                    //     return ret
                    // }],
                })

服务器无法正确接受

如果加上

headers:{

　　　　'Content-Type':'multipart/form-data'  

　　　　}

服务器会报错

MULTIPART: BOUNDARY NOT FOUND MULTER

求大神赐教，谢谢

Answer 1

我解决了 要这样写

// 第一步.将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('avatar', $file);
                this.axios({
                    url: this.baseUrl + '/uploadImg',
                    method: 'post',
                    data: formdata,
                    headers: {
                        'content-type': `multipart/form-data; boundary=${formdata._boundary}`, //这里手动增加boundary
                    },
                }).then((res) => {
                    // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
                    let url = this.baseUrl + '/downloadImg/' + res.data;
                    this.$refs.markdownEditor.$img2Url(pos, url);
                })

Answer 2

你的参数写错了，直接写formData，不要写对象

function uploadFile(data) {
    return $http({
        data,
        url: '/api/uploads',
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

const file = input.files[0]
const formData = new FormData()
formData.append('quill-image', file)
const res = await uploadFile(formData)

Answer 3

需要append进formData里，不然是formData是空的

Answer 4

所有需要使用ajax上传的需求都是一句话：data传FormData对象，把文件append到这个对象