vue+element之解决upload组件上传文件失败后仍显示在列表上、自动上传、过滤、findIndex、splice、filter

MENU

  • 前言
  • 错误案例(没有用)
  • 正确方法
  • 结束语


前言

el-upload上传失败后,文件仍显示在列表上。
upload.png
这个pdf文件上传失败,仍显示在列表,给人错觉是上传成功,所以要把它去掉。


在element中,file-listv-model:file-list是用于上传文件组件的两个不同属性。
1、file-list属性用于显示已上传文件列表,可以通过设置file-list属性为一个数组。数组中包含已上传文件的信息,例如文件名、大小等,element会根据这个数组来展示已上传文件列表。
2、v-model:file-list用于绑定已上传文件的双向绑定属性,通过将v-model:file-list绑定到一个变量上,可以实现上传文件的双向绑定,即当用户上传文件时,绑定的变量会更新,反之亦然。属性通常用于需要在上传文件后对文件进行处理或者在上传前对文件进行验证的场景。
file-list用于显示已上传文件列表
v-model:file-list用于实现上传文件的双向绑定。


错误案例(没有用)

前言

这是网上其他博主写的博客,并没有解决问题,还报错了。


html

<el-uploadclass="upload-file padding"ref="uploadFile"multipleaccept="image/jpeg,image/png,image/gif,application/pdf":http-request="uploadFile":on-change="onChange":before-upload="beforeuploadFile"action="123":disabled="!isDisabled":on-remove="handleRemove":file-list="ruleForm.commission"><el-button type="primary" size="mini" :loading="uploadLoding" :disabled="!isDisabled">上传</el-button><div slot="tip" class="el-upload__tip" style="line-height: 1; margin: 0 0 10px;">注:只能上传图片或pdf文件</div>
</el-upload>

JavaScript

handleRemove (file, fileList) {this.ruleForm.commission = fileList// 用于校验// this.ruleForm.fileName = ''
},
onChange (file, fileList) {this.files = fileList
},
// 上传
uploadFile (fileObj) {let file = fileObj.fileuploadImageInfo({ file: file, width: 165, height: 245, caseId: this.caseId, taskId: this.taskId }).then(res => {if (res.success && res.data) {// 后端接口返回后逻辑-todoconst obj = {// 文件名带后缀name: '文件名.pdf',// 文件路径url: data.path,}// 显示用的this.ruleForm.commission.push(obj)}}).catch(err => {console.log(err)// 关键作用代码,去除文件列表失败文件let uid = file.uid// 关键作用代码,去除文件列表失败文件(uploadFiles为el-upload中的ref值)let idx = this.$refs.uploadFile.uploadFiles.findIndex(item => item.uid === uid)// 关键作用代码,去除文件列表失败文件this.$refs.uploadFile.uploadFiles.splice(idx, 1)})
}

正确方法

html

<el-upload v-model:file-list="form.fileList" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf"action="/api/upload/file" :show-file-list="true" :on-progress="uploadProgress":on-preview="fileViewV" :on-success="successFileFolder" :on-error="uploadError"><el-button type="success" size="small">上传</el-button>
</el-upload>

JavaScript

fileViewV(file) {window.open(file.response.response.previewPath, '_blank');
},
successFileFolder(re, file, fileList) {fileList = fileList.filter(item => item.response.code !== 500);this.form.trainData = fileList;if (re.code === 500) {this.$message.error(re.message);} else {this.$message.success(re.message);}this.loading.close();
},
uploadProgress() {this.loading = this.$loading({lock: true,text: '文件上传中…',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.5)'});
},
uploadError() {this.loading.close();this.$message.error('文件上传失败,请检查文件大小或文件格式');
}

结束语

翻了官方文档,没有看到处理方法,之所以这么处理,是因为显示的fileList列表并不是赋值数据需要显示的列表。
正好遇到此问题,整理出来解决方法,希望能帮到需要的人。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/3775.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bun 入门到精通(一)

Bun 是什么&#xff1f; Bun 是用于 JavaScript 和 TypeScript 应用程序的多合一工具包。它作为一个名为 bun 的可执行文件提供。 其核心是 Bun 运行时&#xff0c;这是一个快速的 JavaScript 运行时&#xff0c;旨在替代 Node.js。它是用 Zig 编写的&#xff0c;并由 JavaSc…

Matlab|交直流系统潮流计算(含5种控制模式)

目录 1 主要内容 程序参考流程图 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序参考文献《交直流系统潮流计算及相互关联特性分析》&#xff0c;采用5种交直流潮流控制方式&#xff1a;1.定电流定电压 2.定电流定熄弧角 3.定功率定电压 4.定功率定熄弧角 5.定触发角…

Kafka 生产者应用解析

目录 1、生产者消息发送流程 1.1、发送原理 2、异步发送 API 2.1、普通异步发送 2.2、带回调函数的异步发送 3、同步发送 API 4、生产者分区 4.1、分区的优势 4.2、生产者发送消息的分区策略 示例1&#xff1a;将数据发往指定 partition 示例2&#xff1a;有 key 的…

经典的免费wordpress模板

这款经典的免费WordPress模板以鲜艳的红色为主调&#xff0c;充满了活力与热情。设计简洁而现代&#xff0c;适合各种类型的项目网站。模板采用响应式设计&#xff0c;确保在不同设备和屏幕尺寸上都能呈现出完美的视觉效果。 红色象征着激情、活力和自信&#xff0c;这款模板…

2024年Q1企业邮箱安全性研究报告:钓鱼邮件同比增长59.9%

4月23日&#xff0c;Coremail邮件安全联合北京中睿天下信息技术有限公司发布《2024年第一季度企业邮箱安全性研究报告》。对当前企业邮箱的应用状况和安全风险进行了分析。 1、垃圾邮件持续增长 根据Coremail邮件安全人工智能实验室最新数据显示&#xff0c;2024年第一季度&am…

4 -26

4-26 1 英语单词100个一篇六级翻译 2 div 4 补题目 3 概率论期中卷子一张&#xff0c;复习复习。 4 备课ing 晚上出去炫饭&#xff0c;串串香&#xff0c;无敌了。 中间一些模拟题是真的恶心&#xff0c;思维题是真的想不到&#xff0c;感觉自己就是一个废物呢。 1.是将一个数…

[C++]STL---unordered_set与unordered_map的模拟实现

目录 前言 哈希桶的改造 哈希桶的初步改造 迭代器的模拟实现 operator() 类互相typedef时的前置声明 友元声明 迭代器的出口 插入Insert() 查找Find(&#xff09; 哈希表的最终改造 unordered_set的模拟实现 unordered_map的模拟实现 前言 unordered_set与set的区…

运行游戏提示dll文件丢失,分享多种有效的解决方法

在我们日常频繁地利用电脑进行娱乐活动&#xff0c;特别是畅玩各类精彩纷呈的电子游戏时&#xff0c;常常会遭遇一个令人困扰的问题。当我们满怀期待地双击图标启动心仪的游戏程序&#xff0c;准备全身心投入虚拟世界时&#xff0c;屏幕上却赫然弹出一条醒目的错误提示信息&…

最受站长欢迎的wordpress模板

蓝色与黄色&#xff0c;作为经典的互补色&#xff0c;它们在企业网站设计中总能碰撞出令人印象深刻的火花。当这两种鲜艳的色彩巧妙结合时&#xff0c;不仅能够吸引访客的注意力&#xff0c;还能传达出一种活力四射、积极向上的企业形象。 今天&#xff0c;我们为您推荐的这款…

LAPGAN浅析

LAPGAN 引言 在原始 GAN和CGAN中&#xff0c;还只能生成 16*16, 28*28, 32*32 这种低像素小尺寸的图片。而LAPGAN首次实现 64*64 的图像生成。与其一下子生成这么大的图像 &#xff08;包含信息量这么多&#xff09;&#xff0c;不如一步步由小到大&#xff0c;这样每一步生成…

书籍推推荐之二--《生命的色彩》

史钧《生命的色彩》 在生活中&#xff0c;我们会注意到一个有趣的现象&#xff1a;每个人的头发颜色各不相同&#xff0c;有黑色、灰色、黄色、棕红色、银白色等&#xff0c;但就是没有绿色。对于生活在丛林中的早期人类来说&#xff0c;绿色的头发简直就是天然的迷彩服&#x…

随手记:树结构翻页和定位指定数据逻辑

业务背景&#xff1a; 树形组件展示数据&#xff0c;数据包含过去数据&#xff0c;现在数据&#xff0c;未来数据&#xff0c;用户在首次进入页面时&#xff0c;展示的是当天的数据&#xff0c;如果当天没有数据&#xff0c;则显示最近一条的过去数据。数据按照时间越长数据会…

可替代IBM DOORS的现代化需求管理解决方案Jama Connect,支持数据迁移及重构、实时可追溯性、简化合规流程

作为一家快速发展的全球性公司&#xff0c;dSPACE一直致力于寻找保持领先和优化开发流程的方法。为推进其全球现代化计划&#xff0c;dSPACE开始寻找可以取代传统需求管理平台&#xff08;IBM DOORS&#xff09;的需求管理解决方案。 通过本次案例&#xff0c;您将了解dSPACE为…

大数据第五天(操作hive的方式)

文章目录 操作hive的方式hive 存储位置hive 操作语法创建数据表的方式 操作hive的方式 hive 存储位置 hive 操作语法 创建数据表的方式 – 创建数据库 create database if not exists test我们创建数据库表的时候&#xff0c;hive是将我们的数据自动添加到数据表中&#xf…

江苏开放大学2024年春《机电设备安装与调试 050095》第三次形成性考核作业参考答案

电大搜题 多的用不完的题库&#xff0c;支持文字、图片搜题&#xff0c;包含国家开放大学、广东开放大学、超星等等多个平台题库&#xff0c;考试作业必备神器。 公众号 答案&#xff1a;更多答案&#xff0c;请关注【电大搜题】微信公众号 答案&#xff1a;更多答案&#…

一文解析golang中的协程与GMP模型

文章目录 前言1、线程实现模型1.1、用户级线程与内核级线程1.2、内核级线程模型1.3、用户级线程模型1.3、两级线程模型 2、GMP模型2.1、GMP模型概述2.1、GMP v1版本 - GM模型2.2、GMP v2版本 - GMP模型2.3、GMP相关源码2.4 调度流程2.5 设计思想 3.总结 前言 并发(并行&#x…

vue实现录音并转文字功能,包括PC端web,手机端web

vue实现录音并转文字功能&#xff0c;包括PC端&#xff0c;手机端和企业微信自建应用端 不止vue&#xff0c;不限技术栈&#xff0c;vue2、vue3、react、.net以及原生js均可实现。 原理 浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现&#xff0c;这是浏览器…

JTAG访问xilinx FPGA的IDCODE

之前调试过xilinx的XVC&#xff08;Xilinx virtual cable&#xff09;&#xff0c;突然看到有人搞wifi-JTAG&#xff08;感兴趣可以参考https://github.com/kholia/xvc-esp8266&#xff09;&#xff0c;也挺有趣的。就突然想了解一下JTAG是如何运作的&#xff0c;例如器件识别&…

淘宝/天猫按图搜索淘宝商品(拍立淘) API,按图搜索商品详情

淘宝/天猫的“按图搜索商品”功能&#xff0c;通常被称为“拍立淘”&#xff0c;允许用户通过上传图片来搜索相似的商品。这项服务背后是由淘宝提供的API支持&#xff0c;使得用户能够快速找到与上传图片相匹配或类似的商品。以下是关于“按图搜索淘宝商品”API的一些关键信息&…

Unity类银河恶魔城学习记录15-1,2 p153 Audio Manager p154 Audio distance limiter

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili AudioManager.cs using System.Collections; using System.Collections.Gen…