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的作用及用法:

经验分享 程序员 微信小程序 职场和发展