需求如下:
点击定制航线,从本地选择文件
点击打开后直接调取接口
主要代码如下:
<el-upload
v-if="item.uploadFlag" // 是否显示上传组件
ref="xlsUpload"
:style="{ display: 'inline-block' }"
:auto-upload="false" // 不自动上传
:on-change="fileOnChange" // 文件状态改变时的钩子
:before-upload="beforeUpload" // 上传文件之前的钩子
:show-file-list="false" // 不显示已上传文件列表
action=""
accept=".txt" // 上传文件的类型
>
beforeUpload(file) {
this.uploadFile = file;
return false; // 停止上传
},
fileOnChange() {
this.$refs.xlsUpload[0].submit();
if (!this.uploadFile) {
this.$message({
message: '请先选择文件',
type: 'warning'
});
return;
}
const formData = new FormData();
formData.append('file', this.uploadFile);
console.log(this.uploadFile, 'uploadFile');
this.$confirm('是否上传航线?', {
showClose: false,
type: 'warning'
})
.then(() => {
// 调用上传方法
this.$message({
type: 'success',
message: '上传成功!'
});
})
.catch(() => {});
}
我的一个错误:
this.$refs.xlsUpload.submit(); (错误写法)
因为我这里的子菜单是循环出来的,所以this. $refs.xlsUpload是个数组。
报错:
所以需要获取到ref数组的第0项。
注意:before-upload
before-upload:上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被
reject,则停止上传。
所以把auto-upload设置为false时,选中文件后不会触发上传事件
before-upload是文件上传之前触发的,是指文件已经被选中,提交时才会触发。
所以不手动使用submit方法,是不会触发before-upload的。
所以需要this.$refs.xlsUpload[0].submit();