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
                                })

 

轉自：https://www.jianshu.com/p/1ed2cd88e699

 

前端使用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();
});