vue版本：2.6.14
ElementUI版本：^2.15.6
场景描述：
在开发业务中想要实现EXCEL单文件上传，不想要 ElementUI 中 upload 组件的自动上传，而是上传文件到临时变量中，最后再通过上传按钮将文件上传至后端对应接口。
关键代码如下：
<template>
...
<el-upload class="upload-excel" ref="upload" action="#" accept=".xlsx,.xls" :limit="1" :http-request="handleUploadFile">
<span class="tag">数据文件</span>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-button class="btn-sure" type="primary" @click="uploadFile">确认上传</el-button>
...
</template>
<script>
export default {
...
data() {
return {
dataFile: {}
}
},
...
methods: {
// 文件上传
async uploadDataModel() {
// 调用对应文件上传接口
const { data: res } = await sendUploadRequest(this.dataFile);
...
},
// 文件提交
handleUploadFile({ file }) {
this.dataFile = new FormData();
this.dataFile.append('file', file);
}
}
}
</script>
注意点：
action属性必填，官方规定，因为想要手动点击上传按钮再上传，所以这里没有填写接口地址，随便填写一个字符串即可。- 由于想要实现单文件上传，所以需要
:limit="1"限制文件上传个数。- 使用
:http-request来覆盖el-upload的默认上传行为，这里我只需要拿到上传的文件，然后存储在一个临时变量中即可（file文件需要封装到FormData再传给后端，后端使用的是MultipartFile接收的文件）- 上面的
{ file }是采用了解构取值，等同于：handleUploadFile(fileObj) { this.dataFile = new FormData(); this.dataFile.append('file', fileObj.file); }
