Vue中使用axios以FormData形式提交数据
这算是接上篇所写吧,上篇在上传图片的时候,要传给后端图片文件的blob对象,这个时候就得使用FormData的方式提交了,其实也是蛮简单的一个东西了,就直接上代码了
// 表单提交
doSubmit() {
this.$refs["inputForm"].validate((valid) => {
if (valid) {
if(!this.inputForm.img) return this.$message.warning(请选择图片)
this.loading = true
let formData = new FormData()
const { id, dataCenterId, buildName, state, buildCount, buildDesc, img } = this.inputForm
formData.append("id", id)
formData.append("dataCenterId", dataCenterId)
formData.append("buildName", buildName)
formData.append("state", state)
formData.append("buildCount", buildCount)
formData.append("buildDesc", buildDesc)
formData.append("img", img) //继承自Blob的二进制大对象
this.$http({
url: wft/fromsave,
method: post,
headers: {
Content-Type: multipart/form-data
},
data: formData
}).then(({ data }) => {
if(data && data.success) {
this.$message.success(操作成功)
}
})
}
})
}
一篇大哥的博文介绍了FormData的作用及用法:
