Element UI 上传组件实现文件上传并附带额外参数

1. 需求

在使用

ElementUI

的上传组件

el-upload

实现文件上传功能时，如果单文件上传是比较简单的，但是在实际需求中，往往会在上传文件时伴随着一些其他参数，效果如下图：

在上传指定类型的文件时，例如HTTPS证书的文件类型必须为

.jks

格式，还必须要伴随一些额外的参数。

2. 思路

el-upload

上传组件提供了一些参数：
参数说明data上传时附带的额外参数accept

3. 示例代码

HTML代码：

<divclass="upload-button"><el-uploadref="certificateUpload"class="upload-container":action="uploadAPI":auto-upload="false"name="multipartFile":with-credentials="true":data="uploadObjs":file-list="fileList"accept=".jks":before-upload="onBeforeUpload":before-remove="onBeforeRemove":on-success="onUploadSuccess":on-error="onUploadError":on-change="onUploadChange"><el-buttontype="primary"size="mini"icon="el-icon-upload2">选择证书</el-button></el-upload></div>

JS代码：

exportdefault{data(){return{uploadAPI:'',uploadObjs:{},fileList:[]}},methods:{// 文件上传前钩子onBeforeUpload(){// 可以在上传前的钩子函数中添加额外参数this.uploadObjs ={...// 添加的参数字段}},onBeforeRemove(){},onUploadSuccess(){},onUploadError(){},onUploadChange(){}}}