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

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

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

<!-- 表单部分的代码这里就不贴出来了，这部分代码也不重要 -->
 <el-upload
   ref="upload"
   :action="url" 
   :limit="2"
   multiple
   :with-credentials="true"
   :on-success="upFile"
   :on-remove="handleRemove"
   :on-exceed="handleExceed"
   :data="upData"
   :auto-upload="false"
   accept=".KEY, .CRT">
   <img src="/static/images/web/upload.png" alt>
    <span>选择上传证书</span>
   <div slot="tip" class="el-upload__tip">只能上传.key/.crt文件，且只能上传两个</div>
 </el-upload>
 <!-- 提交表单的事件:add -->
 <el-button type="primary" @click="add('form')">添加</el-button>