axios请求发送formData对象

今天在做一个文件上传功能时，遇到一个问题，把前端用el-upload上传的file发送给后端，像往常一样用axios传data，用QS stringify 序列化数据发送给后端，并不接受，查了资料才解决，原来我们的后端不接受 payload 方式上传，只能用 FormData 格式，把所有参数都放在 FormData 内发送过去即可。

beforeUpload内

beforeUpload(file) {
                this.$refs['upload'].clearFiles()
                this.dataForm.multipartFile = null
                this.fileList = []
                // console.log(file)
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = testmsg === 'xls'
                const extension2 = testmsg === 'xlsx'
                const isLt2M = file.size / 1024 / 1024 < 10
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx格式!',
                        type: 'warning'
                    })
                }
                if (!isLt2M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    })
                }
                if ((extension || extension2) && isLt2M) {
                    this.dataForm.multipartFile = file
                    this.fileList.push(file)
                }
                return (extension || extension2) && isLt2M
            },

写一个方法将form绑定的对象转化为formData格式

jsonToFormData(dataForm) {
                const formData = new FormData()
                formData.append('status', '0')
                formData.append('createBy', this.userInfo.name)
                formData.append('deptId', dataForm.deptId)
                formData.append('taskNumber', dataForm.taskNumber)
                formData.append('customer', dataForm.customer)
                formData.append('transType', dataForm.transType)
                formData.append('companyPrifixLen', dataForm.companyPrifixLen)
                formData.append('tagSize', dataForm.tagSize)
                formData.append('filterValue', dataForm.filterValue)
                //******************存储二进制文件对象********************************
                formData.append('multipartFile', dataForm.multipartFile)
                formData.append('serialNumber', dataForm.serialNumber)
                formData.append('partition', dataForm.partition)
                if (dataForm.serialSuffix) {
                    formData.append('serialSuffix', dataForm.serialSuffix)
                } else {
                    formData.append('serialSuffix', '0')
                }
                return formData
            },

表单提交

这里注意，一定要把axios中的header中的content-type改为'multipart/form-data'

const header = {
    // 必须要把 Content-Type 改为 multipart/form-data
    'Content-Type': 'multipart/form-data'
}

const formData = this.jsonToFormData(this.dataForm)
                            this.loading = true
                            addObj(formData)
                                .then((data) => {
                                    this.loading = false
                                    this.$notify.success('添加成功')
                                    this.visible = false
                                    this.$emit('refreshDataList')
                                })
                                .catch(() => {
                                    this.loading = false
                                    this.canSubmit = true
                                })

 

 

前端使用axios如何提交表单请求

 

//使用FormData创建参数
let formData = new FormData();
formData.append("jsonData", JSON.stringify(reportOptions.request));
formData.append("jsonAttrsData", JSON.stringify(reportOptions.attrs));//添加请求头
axios({
 url: url,
 data: formData,
 responseType: 'blob',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
 method: 'post'
 }).then(function (res) {
 let filename = `${options.options.name + new Date().format('yyyyMMddhhmmss')}.xlsx`;
 downloadBlob(res.data, filename);
 resolve();
 }).catch(function () {
 resolve();
 });