vue项目中使用element插件中的upload上传文件的踩坑记录

 一、项目需求在上传状态中原插件点击直接上传到服务器 本项目中的需求是 点击上传到本地 点击确定按钮之后进行网络请求上传到服务器上

二、解决办法

（1）标签

<span>上传文件：span>
<el-upload
ref="uploadFile"
class="upload-demo"
:action="actionUrl"
:on-change="handleChange"
:file-list="fileList"
:show-file-list="true"
:before-upload="beforeUpload"
:on-success="successUpdate"
:auto-upload="false"

>
<el-button size="small" icon="el-icon-upload2">点击上传el-button>
el-upload>

（2）js行为

(1)本地上传

beforeUpload(file) {
console.log(file);
let fileName = file.name;
// let uid = file.uid
let pos = fileName.lastIndexOf(".");
let lastName = fileName.substring(pos, fileName.length);
console.log(lastName, lastName.toLowerCase());
if (
lastName.toLowerCase() !== ".xls" &&
lastName.toLowerCase() !== ".xlsx"
) {
this.$message.error("文件必须为 .xls .xlsx类型");
return false;
}
return false;
},

（2）点击网络请求上传服务器

transferToManager() {
console.log('post',this.$refs.uploadFile.$children[0])
this.$refs.uploadFile.$children[0].post(
this.$refs.uploadFile.fileList[0].raw
)
this.managerStatus = false;
},

（3）捕获请求结果

successUpdate(response) {
console.log('successUpdate',response);
if (response.code == 200) {
this.$message(response.msg);
}else{
this.$message.warning(response.msg);
}
this.getAmountList()
},

三、原因分析

为什么不能直接调用submit呢？因为在befroeupload函数调用时若状态改为false，则会导致submit失效