Axios的from表单提交

注意：form表单的请求头有两种：application/x-www-form-urlencoded 和 multipart/form-data
如果没有type=file的控件，用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话，就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息，并加上分割符(boundary)。

                axios({
                    url: this.actionUrl,
                    method: 'post',
                    data: {
                        ...this.uploadData
                    },
                    headers: {
                        'Content-Type': 'multipart/form-data'//含有附件的表单提交的Content-Type
                        //'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
                    },
                    transformRequest: [data => {
                        let formData = new FormData()
                        for(let key in this.uploadData){
                            formData.append(key, this.uploadData[key])
                        }
                        return formData
                    }],
                }).then(res => {
                    if(res.data.code === 0){
                        this.$message.success(res.data.message)
                    }else{
                        this.$message.error(res.data.message)
                    }
                }).catch(err => {console.log(err)})

用途：对于表单中含有上传附件的功能，如果不上传附件只填写并提交其他项，则上传组件的无法提交，使用axios采用表单提交数据。如下图所示：

image.png

根据勾选的节点动态添加上传组件实现一次性上传的实现方案：

                            let axiosArr = []   
                            this.$refs.upload.forEach((item, index) => {
                                //有附件使用submit()提交，否则使用表单提交数据
                                if(item.uploadFiles && item.uploadFiles.length){
                                    item.submit()
                                }else{
                                    let uploadData = this.appealQuestionList[index]
                                    let promise1 = axios({
                                        url: this.actionUrl,
                                        method: 'post',
                                        data: {
                                            ...uploadData
                                        },
                                        headers: {
                                            'Content-Type': 'multipart/form-data'//含有附件的表单提交
                                        },
                                        transformRequest: [data => {
                                            let formData = new FormData()
                                            for(let key in uploadData){
                                                formData.append(key, uploadData[key])
                                            }
                                            return formData
                                        }],
                                    })
                                    axiosArr.push(promise1)
                                }
                            })
                            axios.all(axiosArr).then(axios.spread(() => {
                                this.$message.success('操作成功')
                                this.fullscreenLoading = false
                                this.goBack()
                            }))