导入Excel表格,本来是想着封装请求方法的,行不通,所以直接调用,用的插件是element的upload插件,因为upload默认的传参是file,需要前后端协调。
<el-upload
class="upload-demo"
:before-remove="beforeRemove"
:before-upload="beforeUploadFile"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
:on-success="handleSuccess"
:action="uploadProps.action"
:headers="uploadProps.headers"
accept=".xlsx"
:data="uploadProps.data"
>
<el-button type="primary">导入</el-button>
</el-upload>
这是html代码,在计算属性里调用接口,传参,在success事件里写接口成功后的代码。
computed: {
uploadProps() {
return {
action: `这个是调用的接口`,
headers: {
`接口可能要带token`
},
data: {}
};
}
},
之后就在方法里写申明的方法
beforeUploadFile(file) {
let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
let size = file.size / 1024 / 1024;
if (extension !== "xlsx") {
this.$message.warning("只能上传Excel2017(即后缀是.xlsx)的文件");
return false;
}
if (size > 10) {
this.$message.warning("文件大小不得超过10M");
}
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件,本次选择了 ${
files.length
} 个文件,共选择了 ${files.length + fileList.length} 个文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},
handleSuccess(res) {
if (res.code == 200) {
this.$message.success(res.msg);
} else {
this.$message.error(res.msg);
}
},
导入Excel文件的全部代码