1.el-upload
上传附件:
<el-uploadref="upload":action="upload.url + '?updateSupport=' + upload.updateSupport":auto-upload="false":disabled="upload.isUploading":headers="upload.headers":limit="1":on-progress="handleFileUploadProgress":on-success="handleFileSuccess"accept=".xlsx, .xls"drag:file-list="upload.fileList":data="upload.data"><i class="el-icon-upload" /><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div></el-upload><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitFileForm">确 定</el-button><el-button @click="upload.open = false">取 消</el-button></div></el-dialog>是否重新上传提示框<el-dialogtitle="关联码重复,是否继续上传?":visible.sync="continueUploadModal.show"width="30%"><span>{{ continueUploadModal.msg }}</span><span slot="footer" class="dialog-footer"><el-button @click="continueUploadModal.show = false">取 消</el-button><el-button type="primary" @click="continueUpload">确 定</el-button></span></el-dialog>
2.data数据
upload: {// 是否显示弹出层(导入)open: false,// 弹出层标题(导入)title: "带征地导入",// 是否禁用上传isUploading: false,// 是否更新已经存在的设备数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/load/landAcquisition/import",// 上传文件列表fileList: [],//额外参数data: {isCon: 0}},
// 复制filefileCopy: null,
3.js
// 文件上传中处理handleFileUploadProgress(event, file, fileList) {this.$set(this.upload, "fileList", [file]);this.upload.isUploading = true;},// 文件上传成功处理handleFileSuccess(response, file, fileList) {const { code, msg } = response;if (code == 505) {// 在这里存一下文件this.fileCopy = file;// 清空上传文件的this.$refs.upload.clearFiles();this.continueUploadModal.show = true;this.continueUploadModal.msg = msg;} else {this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +response.msg +"</div>","导入结果",{ dangerouslyUseHTMLString: true });this.upload.open = false;this.upload.isUploading = false;this.$refs.upload.clearFiles();this.upload.data.isCon = 0this.continueUploadModal.show = falsethis.getList();}},// 提交上传文件submitFileForm() {this.$refs.upload.submit();},
// 导入文件,关联码重复,继续上传continueUpload() {this.upload.data.isCon = 1;this.$refs.upload.handleStart(this.fileCopy.raw);this.submitFileForm();},