el-upload 组件上传文件时携带参数，并将上传与接口调用分离

背景

需要实现文件导入，但是直接调用el-upload组件，在action中设置url在上传时会直接调用接口，但是项目需求是点击“上传”按钮后只上传文件，需要点击“确认”按钮，携带额外参数调用上传接口，所以需要对el-upload组价使用方式稍微发生改变。

实现

• http-request：会覆盖action的上传操作，允许自行实现上传
• accept：指定上传文件类型

template

<el-upload drag :limit="1" accept=".json"  :http-request="uploadFiles">
 	<div class="el-upload__text">
    	<em>点击上传</em>
  	</div>
  	<template #tip>
    	<div class="el-upload__tip">
	      限制1个文件
    	</div>
  	</template>
</el-upload>

<el-button @click="cancelImport">取消上传</el-button>
<el-button @click="confirmImport" type="primary">确认上传</el-button>

script

1. 自定义上传过程，uploadedFile全局变量记录上传的文件

let uploadedFile = ref()
const uploadFiles = async (params) => {
  uploadedFile.value = params.file
}

2. 确认按钮，data添加文件uploadedFile、附带其他参数id，调用上传接口
   必须使用new FormData()，才能满足文件是二进制文件流

let data = new FormData()
data.append('file', uploadedFile.value)    //
data.append('id', appId.value)

//调用后台的上传接口
let res = await uploadWorkflow(data)

核心思想

1. 上传的文件作为全局变量保存
2. 调用接口时传入文件，通过append添加接口所需的参数