vue使用el-upload上传,上传错误文件,名称还会显示

vue使用el-upload上传,上传错误文件,名称还会显示

背景:上传不符合后缀的文件,但是还是在页面中显示,使用的是http-request方法

代码:

<el-upload multiple class="avatar-uploader" action="#" :before-upload="(e, fileList) => {beforeUpload(e, fileList, scope.row, scope.$index)}"  :file-list="scope.row.fileList"  :on-remove="handleRemove()" :before-remove="(e, fileList) => {beforeRemove(e, fileList, scope.row, scope.$index)}" :http-request="(e, fileList) => {handleChange(e, fileList, scope.row, scope.$index)}"><el-button style="background-color: #fff; color: gray; border-color: gray;"  size="small" icon="el-icon-circle-plus-outline" type="primary"></el-button>
</el-upload>
// 限制上传文件格式limitChange(file, row) {var limitFile = true;var msg = "";//获取文件后缀const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);if (row.templateType === 1) {// 上传图片jpg、pngconst whiteList = ["jpg", "png"];if (whiteList.indexOf(fileSuffix) === -1) {this.$message.error('上传图片只能是jpg、png格式');limitFile = false;}} else if (row.templateType === 2) {// 上传压缩文件 zip、rarconst whiteList = ["zip", "rar"];if (whiteList.indexOf(fileSuffix) === -1) {this.$message.error('上传图片只能是zip、rar格式');limitFile = false;}} else if (row.templateType === 3) {// 上传音视频 mp3、mp4const whiteList = ["mp3", "mp4"];if (whiteList.indexOf(fileSuffix) === -1) {this.$message.error('上传图片只能是mp3、mp4格式');limitFile = false;}} else if (row.templateType === 5) {// 上传文档:pdf、doc、docx、ppt、pptxconst whiteList = ["pdf", "doc", "docx", "ppt", "pptx"];if (whiteList.indexOf(fileSuffix) === -1) {this.$message.error('上传图片只能是pdf、doc、docx、ppt、pptx格式');limitFile = false;}} else if (row.templateType === 6) {// CAD:dwg,dfxconst whiteList = ["dwg", "dfx"];if (whiteList.indexOf(fileSuffix) === -1) {this.$message.error('上传文件只能是dwg、dfx格式');limitFile = false;}} else if (row.templateType === 7) {// 三维模型:skp,max,fbxconst whiteList = ["skp", "max", "fbx"];if (whiteList.indexOf(fileSuffix) === -1) {this.$message.error('上传文件只能是skp、max, fbx格式');limitFile = false;}}return limitFile;},// 上传附件,有时间和上传图片一起封装成一个方法handleChange(e, fileList, row, index) {var flag = this.limitChange(e.file, row);if (!flag) {// 主要是这一句e.onError()return;}var vm = thislet file = e.raw...}

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

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

相关文章

【八股03.29】

【八股03.29】 1.内存泄漏&#xff1f;野指针&#xff1f;悬挂指针&#xff1f; 什么是内存泄漏&#xff1f; 内存泄漏是指程序运行过程中申请的动态分配的堆内存没有被释放&#xff0c;造成系统内存浪费&#xff0c;运行速度减慢甚至崩溃等严重后果。 如何避免&#xff1f;…

DARTS-PT: RETHINKING ARCHITECTURE SELECTION IN DIFFERENTIABLE NAS

Rethinking Architecture Selection in Differentiable NAS 论文链接&#xff1a;https://arxiv.org/abs/2108.04392v1 项目链接&#xff1a;https://github.com/ruocwang/darts-pt ABSTRACT 可微架构搜索(Differentiable Neural Architecture Search, NAS)是目前最流行的网…

光耦合器电路基本概述

在当今快速发展的技术环境中&#xff0c;光耦合器电路在确保电信号跨隔离电路的无缝传输方面发挥着关键作用。这些半导体器件通常被称为光电隔离器&#xff0c;具有许多优点&#xff0c;包括电路隔离、信号传输和精确的电路控制。然而&#xff0c;如果不全面了解市场上各种光耦…

Python批量提取pdf首页并合并为一个文件

前情提要&#xff1a;python安装pypdf2包 pip install pypdf2 第一种&#xff1a;既需要每一个单独的首页&#xff0c;也需要将首页合并。 整体操作思路&#xff0c;将文件夹下面原本的每一个pdf获取第一页&#xff0c;然后再写出&#xff0c;将其放在FirstPage文件夹下。再…

Verilog语法之always语句学习

always语法是Verilog_HDL中最常用的一种语法。 always过程语句和语句块组成的&#xff0c;语法格式如下所示。 always(敏感信号1 or 敏感信号2.....) always实现组合逻辑和时序逻辑。用always实现组合逻辑要将所有的敏感信号加入敏感列表中&#xff1b;用always实现时序逻辑时…

vue 窗口内容滚动到底部

onMounted(() > {scrollToBottom() }) // 滚动到底部方法 const scrollToBottom () > {// 获取聊天窗口容器let chatRoom: any document.querySelector(".chat-content");// 滚动到容器底部chatRoom.scrollTop chatRoom.scrollHeight; } 效果 聊天窗口代码…

aeon,一个好用的 Python 库!

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;今天为大家分享一个好用的 Python 库 - aeon Github地址&#xff1a;https://github.com/aeon-toolkit/aeon 在现代计算机科学和人工智能领域&#xff0c;处理时间序列数据是一个重要而复杂的任务。Python aeon库…

npm install 报错ERESOLVE unable to resolve dependency tree

描述&#xff1a;npm install 报错ERESOLVE unable to resolve dependency tree 解决方案&#xff1a; npm install --legacy-peer-deps

深入MNN:开源深度学习框架的介绍、安装与编译指南

引言 在人工智能的世界里&#xff0c;深度学习框架的选择对于研究和应用的进展至关重要。MNN&#xff0c;作为一个轻量级、高效率的深度学习框架&#xff0c;近年来受到了众多开发者和研究人员的青睐。它由阿里巴巴集团开源&#xff0c;专为移动端设备设计&#xff0c;支持跨平…

gateway 分发时若两个服务的路由地址一样,怎么指定访问想要的服务下的地址

1.思路 在使用Spring Cloud Gateway时&#xff0c;如果两个服务的路由地址相同&#xff0c;可以通过Predicate&#xff08;断言&#xff09;和Filter&#xff08;过滤器&#xff09;的组合来实现根据请求的不同条件将请求分发到不同的服务下的地址。 使用Predicate进行路由条件…

sync包常用并发安全数据结构

sync.WaitGroup 使用 sync.WaitGroup用于等待一组goroutine完成。Add方法设置计数器&#xff0c;Done方法减少计数器&#xff0c;Wait方法阻塞直到计数器为0。 package mainimport ("fmt""sync""time" )func worker(id int, wg *sync.WaitGroup…

Hive窗口函数笔试题(面试题)

Hive笔试题实战 短视频 题目一&#xff1a;计算各个视频的平均未完播率 有用户-视频互动表tb_user_video_log&#xff1a; id uid video_id start_time end_time if_follow if_like if_retweet comment_id 1 101 2001 2021-10-01 10:00:00 2021-10-01 10:00:30…

使用mysql官网软件包安装mysql

确定你的操作系统&#xff0c;我的是Centos myqsl 所有安装包的地址&#xff1a;https://repo.mysql.com/yum/ 如果你是使用rpm安装你可以到对应的版本里面找到对应的包。 mysql 发行包的地址&#xff1a;http://repo.mysql.com/ 在这里你可以找到对应的发布包安装。 这里使用y…

TCP/IP 网络模型有哪几层?(计算机网络)

应用层 为用户提供应用功能 传输层 负责为应用层提供网络支持 使用TCP和UDP 当传输层的数据包大小超过 MSS&#xff08;TCP 最大报文段长度&#xff09; &#xff0c;就要将数据包分块&#xff0c;这样即使中途有一个分块丢失或损坏了&#xff0c;只需要重新发送这一个分块…

【2】单链表

【2】单链表 1、单链表2、单链表的设计3、接口设计4、SingleLinkedList5、node(int index) 返回索引位置的节点6、clear()7、添加8、删除9、indexOf(E element) 1、单链表 &#x1f4d5;动态数组有个明显的缺点 &#x1f58a; 可能会造成内存空间的大量浪费 &#x1f4d5; 能否…

基于pear-admin-flask 的 flask 使用教程

我最近接触到了一个极为出色的Flask后台库——pear-admin-flask&#xff0c;这个库具有很高的二次开发价值。借此机会学习并吸收其中Flask开发的一些高级技巧。 1. flask 自定义命令 pear-admin-flask/applications/common/script/admin.py from flask.cli import AppGroup …

CUDA从入门到放弃(十四):CUDA Thrust库

CUDA从入门到放弃&#xff08;十四&#xff09;&#xff1a;CUDA Thrust库 Thrust 是一个基于标准模板库&#xff08;STL&#xff09;的 C 模板库&#xff0c;专为 CUDA 设计&#xff0c;旨在简化高性能并行应用的开发。它提供了一系列数据并行原语&#xff0c;如扫描、排序和…

vue基础教程(4)——十分钟吃透vue路由router

同学们可以私信我加入学习群&#xff01; 正文开始 前言一、路由概念二、路由使用三、创建路由对应的组件四、给整个项目一个入口总结 前言 前面的文章运行成功后&#xff0c;页面显示如下&#xff1a; 在这个页面中&#xff0c;点击Home和About都会切换右面的页面内容&#…

《责任链模式(极简c++)》

本文章属于专栏- 概述 - 《设计模式&#xff08;极简c版&#xff09;》-CSDN博客 模式说明 方案&#xff1a; 责任链模式将请求的发送者和接收者解耦&#xff0c;构成一个链条&#xff0c;并由多个对象对请求进行处理&#xff0c;直到找到合适的处理者为止。优点&#xff1a; …

iOS UIFont-真香警告之字体管理类

UIFont 系列传送门 第一弹加载本地字体:iOS UIFont-新增第三方字体 第二弹加载线上字体:iOS UIFont-实现三方字体的下载和使用 第三弹搭建字体管理类:iOS UIFont-真香警告之字体管理类 前言 不知道友们是否有过这种经历,项目已经迭代了很多版本,项目中的文件已经上千个了…