el-upload上传文件取消默认直接上传,改为手动上传
html部分
<el-upload
ref="upload"
:accept="fileType.join(',')"
:limit="1"
:headers="upload.headers"
:action="upload.url"
:before-upload="beforeUpload"
:disabled="upload.isUploading"
:on-progress="handleFileProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
:data="dataInfo" //绑定对象 若需要传递多个参数时使用 不需要则去掉
drag
>
<i class="el-icon-upload" />
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip" style="color: red">
提示:仅允许导入“xls”或“xlsx”格式文件!
</div>
</el-upload>
JS部分
import { getToken } from "@/utils/auth";
export default {
name: "MesDeptProjectMouthWorkingDetail",
data() {
return {
upload: {
headers: { Authorization: getToken() },
url: process.env.VUE_APP_BASE_API + '/importData/upload',
isUploading: false
},
dialogVisiblefile: false,
fileType: ['.xlsx', '.xls'],
dataInfo: {
deptId: null,
yearAndMouth: null
},
},
methods:{
beforeUpload(file) {
const isExcel = /\.(xls|xlsx)$/.test(file.name);
if (!isExcel) {
this.$message.error('上传文件只能是 .xls、.xlsx 格式!');
return false;
}
return true;
},
handleFileProgress() {
this.upload.isUploading = true
},
handleFileSuccess() {
this.upload.isUploading = false
this.$refs.upload.clearFiles()
},
submitUpload() {
this.dialogVisiblefile = false
this.$refs.upload.submit()
},
}
}
}