Vue项目中ElementUI上传文件时携带表单数据进行手动上传

ElementUI的Upload组件携带表单数据进行手动上传

项目需求本来是文件单独上传，再提交表单数据，请求两次接口。现在需求有变，要求在触发表单传输事件的同时上传文件，也就是提交表单数据和上传文件同步进行，请求一次接口。
起初是准备使用upload组件自带的http-request来自定义事件，覆盖组件的默认上传行为，但那样需要自己重新创建formData对象之类的，感觉很麻烦，所以弃用了。
elementui中的upload组件上传文件时能附带额外的参数，所以我的思路是把表单数据作为上传时附带的额外参数提交给后台就好了。
下面废话不多说，直接上代码了：

 
   
    选择上传证书
   
只能上传.key/.crt文件，且只能上传两个
 
 
 添加

  data() {
    return {
      url: service.defaults.baseURL + "aaa/bbb", // 这里写上传文件的地址
      form: {
        ipArea: "",
        sourceMachineIp: ""
      }
    };
  },
   computed: {
   // 这里定义上传文件时携带的参数，即表单数据
    upData: function() {
      return {
        body: this.form
      }
    }
  },
    methods: {
    add(form) {
      this.$refs[form].validate(async valid => {
        if (valid) {
        // 表单验证通过后使用组件自带的方法触发上传事件
          this.$refs.upload.submit()
        } else {
          return false;
        }
      });
    },
    // 成功上传文件
    upFile(res, file) {
      if (res.status == 200) {
        // 文件上传成功后的回调，比如一些提示信息或者页面跳转都写在这里
        this.$message.success(res.info);
      } else {
        this.$message.warning(res.info);
        let _this = this;
        setTimeout(function() {
          _this.$refs.upload.clearFiles();
        }, 1000);
      }
    },
    // 上传文件超出个数
    handleExceed(files, fileList) {
      this.$message.warning(`当前只能选择上传2 个证书`);
    },
    //  移除文件
    handleRemove(res, file, fileList) {
      this.$message.warning(`移除当前${res.name}证书，请重新选择证书上传！`);
    }
  }

此时，当我点击添加按钮触发事件时，发现后台报了一长串的错

检查了一下，发现body携带的参数根本就读不出来，因为文件上传使用的是Content-Type: multipart/form-data;携带参数使用的是FormData格式，这就找到问题所在了，我们需要把表单数据转换一下格式，后台才能接收到。

将body的格式进行转换一下：

此时就能将表单参数和文件同时传给后台了


formData格式下在这里查看上传文件和表单数据的内容
至此，已实现在上传文件的同时提交表单数据的功能。