当前位置: 首页 > news >正文

el-upload,上传文件,后端提示信息,前端需要再次重新上传(不用重新选择文件)

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();},

http://www.lryc.cn/news/476921.html

相关文章:

  • 数字信号处理Python示例(5)使用实指数函数仿真PN结二极管的正向特性
  • ctfshow(89,90,92,93)--PHP特性--intval函数
  • 构建ubuntu22.04.4私有源服务以及配置ubuntu私有源
  • 模块功能的描述方法
  • 【WPF】MatrixTransform类
  • 【C++】继承的理解
  • day50 图论章节刷题Part02(99.岛屿数量 深搜、99.岛屿数量 广搜、100.岛屿的最大面积)
  • 超详细从基准将VMware ESXi 升级到 vSphere 6.7U1教程
  • 华为OD机试 - 打印机队列 - 优先队列(Java 2024 E卷 200分)
  • MatrixOne 助力西安天能替换MySQL+MongoDB+ES打造一体化物联网平台
  • 正则表达式---元字符
  • 数据库Redis篇
  • 在区块链技术中,什么是权益证明(PoS)?
  • Spring Boot——日志介绍和配置
  • Python实现全国岗位招聘信息可视化分析(源码+论文+部署讲解)
  • 【真题笔记】16年系统架构设计师要点总结
  • 2024 CSS保姆级教程二 - BFC详解
  • Knowledge-refined Denoising Network for Robust Recommendation
  • 轴流风机和后倾式风机的安装要求
  • 代码笔录1
  • 强网杯2024 Web WP
  • 《双指针篇》---盛最多水的容器_Java(中等但简单)
  • Linux: network: 环境:网络burst的一个原因,虚拟机感染病毒导致,外部网络设备太忙
  • idea使用Translation插件实现翻译
  • [OS] sys_mmap() 函数+
  • 轧钢机辊道多电动机传动控制系统
  • 使用 Nginx 部署 Python 项目
  • [笔记] SQL 优化
  • 【InfluxDB】InfluxDB 2.x基础概念及原理
  • .net Core 使用Panda.DynamicWebApi动态构造路由