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

el-upload上传文件

需求:选中或拖拽文件后,使用http-request属性实现自动上传,并根据后端传回来的结果显示错误和控制fileList的显示,如果后端返回成功,则文件显示在文件列表处,如果后端返回失败,则文件列表不显示这个文件并提示错误。
在这里插入图片描述
html源码:

<el-uploadclass="upload-demo"dragaction="#":http-request="uploadFile":file-list="fileList":on-error="uploadError"ref="uploadArr":on-change="changeFile"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>

js源码:

changeFile(file){this.fileList=JSON.parse(JSON.stringify(this.fileList));this.newFile=file;// this.fileList.push(fileList);// console.log("changefileList",this.fileList);
},
uploadFile(file){var formData = new FormData();formData.append('file', file.file);formData.append('versionType', parseInt(this.formdata.versionType));this.$axios({url: `/proxy_version/renew/uploadFile`,method: 'post',data:formData,success: (result) => {console.log("result",result);if(result.data===''){this.$message.error(result.msg);console.log("uploadfileList",this.fileList);// file.onError();}else{this.fileList.push(this.newFile);}}});
}

问题一:上传的文件只传了uid给后端

解决方案:
可以使用formData来进行参数和文件的传递,FormData 会将文件自动转换成二进制流,并且将header中的Content-type编码类型被设为 “multipart/form-data”,这种编码方式被用作文件传输提高传输效率,不再需要自己设定。
如果不使用FormData ,手动设定Content-type编码类型,那么传输的文件将不是二进制,而是一个json的map集合,并且只存在uid。

也可以使用base64但是会增大工作量。

var formData = new FormData();
formData.append('file', file.file);
formData.append('versionType', parseInt(this.formdata.versionType));....axios传输代码
//body参数data:formData,....

问题二:this.fileList不会自动新增

在data中设置了fileList,并且:file-list="fileList"进行绑定,但是上传后this.fileList并没有新增文件。
但是在on-change,on-remove,before-remove等(http-request、on-error中得不到fileList)绑定的方法中都可以获得操作的file以及fileList(这里的fileList是自带的,可以得到当前所有文件列表的文件,不是data中自己设置的fileList)
即有两个fileList,一个自己在data设置的,一个是自带的,如果对data中的fileList不进行修改时,会一直为空,即使上传了文件,组件默认修改的是自带的fileList,如果对data中的fileList进行修改时,则文件列表是根据data中的fileList进行显示,而不是自带的fileList。
zuizhong
文件列表最终只显示一个文件。

 handleRemove(file, fileList) {this.fileList = fileList;console.log("删除",this.fileList);console.log("删除file",file);
},
beforeRemove(file, fileList) {console.log("确定",fileList,file);return this.$confirm(`确定移除 ${file.name}`);
},

1.设置on-change方法(未成功)

onchange方法可以得到新上传的file文件,我们可以通过push方式将文件加入fileList,以此来更新fileList,但是遇到问题。

changeFile(file){this.fileList.push(file);console.log("changefileList",this.fileList);
},

问题:在上传后会自动给fileList进行增加,但是如果这个文件符合前端所有的限制要求,则在文件列表处会显示该文件,并且是打勾的状态,可是后端返回报错,这个文件不可用,那么我们需要从文件列表处自动删除这个文件。
如果是在axios的success处进行删除this.fileList.splice(-1);,则针对从未上传过的文件,页面会出现文件出现后会马上消失,如果是已经上传过的,则会出现组件上下跳动一下。

2.解决方案

changeFile(fileList){// 使得界面中文件列表增加的效果消失this.fileList=JSON.parse(JSON.stringify(this.fileList));// 记录下新增加的文件this.newFile=file;
},

最后根据后端的返回结果去修改fileList,从而达到效果。

success: (result) => {console.log("result",result);if(result.data===''){this.$message.error(result.msg);// file.onError();}else{// 界面中的文件列表会出现新上传的文件this.fileList.push(this.newFile);}}
注意:文件列表处显示的文件需要有name属性,才会显示文件名

3.拓展

1.

可以使用file.onError();去手动调用on-error绑定的方法。使用这个方法后文件会从文件列表处消失。
file.onSuccess()等等

2.

// 可以清空已上传的文件
this.$refs.uploadArr.clearFiles();

clearFiles() 方法只会清空已上传的文件,而不会清空待上传的文件队列。如果需要同时清空待上传的文件队列,可以使用 clearQueue() 方法。

相关文章:

el-upload上传文件

需求&#xff1a;选中或拖拽文件后&#xff0c;使用http-request属性实现自动上传&#xff0c;并根据后端传回来的结果显示错误和控制fileList的显示&#xff0c;如果后端返回成功&#xff0c;则文件显示在文件列表处&#xff0c;如果后端返回失败&#xff0c;则文件列表不显示…...

算法导论复习——CHP16 贪心算法

定义 每一步都做出当前看来最优的操作。 问题引入——活动选择问题 问题描述 活动选择问题就是对给定的包含n个活动的集合S&#xff0c;在已知每个活动开始时间和结束时间的条件下&#xff0c;从中选出最多可兼容活动的子集合&#xff0c;称为最大兼容活动集合。 不失一般性&a…...

【霹雳吧啦】手把手带你入门语义分割の番外12:U2-Net 源码讲解(PyTorch)—— 网络的搭建

目录 前言 Preparation 一、U2-Net 网络结构图 二、U2-Net 网络源代码 1、model.py &#xff08;1&#xff09;ConvBNReLU 类 &#xff08;2&#xff09;DownConvBNReLU 类 &#xff08;3&#xff09;UpConvBNReLU 类 &#xff08;4&#xff09;RSU 类 & RSU4F 类…...

phpstudy面板Table ‘mysql.proc‘ doesn‘t exist解决办法

原因分析&#xff1a;误删了mysql数据库 解决办法如下&#xff1a; 1、停止服务 2、先把mysql文件夹下的data文件夹备份&#xff0c;因为data文件里存有数据库文件。然后再删除data文件。 3、cmd管理员命令进入到mysql中的bin目录下 &#xff0c;执行mysqld --initialize-…...

网安入门09-Sql注入(绕过方法梳理)

ByPass SQL注入ByPass是指攻击者通过各种手段绕过应用程序中已经实施的SQL注入防御措施&#xff0c;例如输入恶意数据、修改请求头等方式&#xff0c;绕过过滤、转义、限制等操作&#xff0c;从而成功地执行恶意SQL语句。攻击者使用SQL注入ByPass技术可以让应用程序的防御措施…...

本地计算机 上的 My5OL808 服务启动后停止,某些服务在未由其他服务或程序使用时将自动停止

客户反馈说mysql启动不了&#xff0c;报错信息&#xff1a; 本地计算机 上的 My5OL808 服务启动后停止&#xff0c;某些服务在未由其他服务或程序使用时将自动停止。 查了不少资料&#xff0c;最后分析问题是这样的&#xff0c;手动或者重复安装mysql时&#xff0c;创建了多个…...

2023机器人行业总结,2024机器人崛起元年(具身智能)

2023总结&#xff1a; 1.Chatgpt引爆了通用人工智能&#xff0c;最大的受益者或是机器人&#xff0c;2023年最热门的创业赛道便是人形机器人&#xff0c;优必选更是成为人形机器人上市第一股&#xff0c; 可以说2023年是机器人开启智能化的元年&#xff0c;而2024则将成为机器…...

go 语言中的类型判断

_. ok : interface{}(a).(B)此语句用于判断对象a是否是B类型 也可以判断对象a是否实现了B接口 package mainimport "fmt"type Pet interface {SetName(name string)Name() stringCategory() string } type Dog struct {name string }func (dog *Dog) SetName(name …...

java基于ssm的房源管理系统+vue论文

目 录 目 录 I 摘 要 III ABSTRACT IV 1 绪论 1 1.1 课题背景 1 1.2 研究现状 1 1.3 研究内容 2 2 系统开发环境 3 2.1 vue技术 3 2.2 JAVA技术 3 2.3 MYSQL数据库 3 2.4 B/S结构 4 2.5 SSM框架技术 4 3 系统分析 5 3.1 可行性分析 5 3.1.1 技术可行性 5 3.1.2 操作可行性 5 3…...

RH850P1X芯片学习笔记-A/D Converter (ADCF)

文章目录 Features of RH850/P1x-C ADCFNumber of UnitsRegister Base AddressClock SupplyInterrupts and DMAHardware ResetExternal Input/Output SignalsVirtual Channel OverviewFunctional OverviewBlock DiagramPhysical Channels, Virtual Channels and Scan Groups Re…...

38 调优kafka

操作系统调优 1.禁止atime更新&#xff0c;减少文件系统的写操作。 mount -o noatime 2.选择高性能的文件系统&#xff0c;如ext4或者XFS 3.swap空间设置&#xff0c;将swappniness设置成很小的一个值比如1&#xff5e;10&#xff0c;防止linux OOM Killer 开启随意杀掉进程。…...

java推荐系统:好友推荐思路

1.表的设计 表里面就两个字段&#xff0c;一个字段是用户id&#xff0c;另外一个字段是好友id&#xff0c;假如A跟B互为好友&#xff0c;那在数据库里面就会有两条数据 2.推荐好友思路 上面的图的意思是&#xff1a;h跟a的互为好友&#xff0c;a跟b&#xff0c;c&am…...

java: 写入数据到HBase

一、添加依赖 <dependency><groupId>org.apache.hadoop</groupId><artifactId>hadoop-client</artifactId><version>2.6.0</version></dependency><dependency><groupId>org.apache.hbase</groupId><art…...

机器学习-基于Word2vec搜狐新闻文本分类实验

机器学习-基于Word2vec搜狐新闻文本分类实验 实验介绍 Word2vec是一群用来产生词向量的相关模型&#xff0c;由Google公司在2013年开放。Word2vec可以根据给定的语料库&#xff0c;通过优化后的训练模型快速有效地将一个词语表达成向量形式&#xff0c;为自然语言处理领域的应…...

5.vue学习笔记(数组变化的侦测+计算属性+Class绑定)

文章目录 1.数组变化的侦测1.1.变更方法1.2.替换一个数组 2.计算属性计算属性缓存vs方法 3.Class绑定3.1.绑定对象3.2.多个对象的绑定形式3.3.绑定数组3.4.数组与对象 1.数组变化的侦测 1.1.变更方法 vue能够侦听响应式数组的变更方法&#xff0c;并在它们被调用时出发相关的…...

Java十种经典排序算法详解与应用

数组的排序 前言 排序概念 排序是将一组数据&#xff0c;依据指定的顺序进行排列的过程。 排序是算法中的一部分&#xff0c;也叫排序算法。算法处理数据&#xff0c;而数据的处理最好是要找到他们的规律&#xff0c;这个规律中有很大一部分就是要进行排序&#xff0c;所以需…...

git常用命令及概念对比

查看日志 git config --list 查看git的配置 git status 查看暂存区和工作区的变化内容&#xff08;查看工作区和暂存区有哪些修改&#xff09; git log 查看当前分支的commit 记录 git log -p commitID详细查看commitID的具体内容 git log -L :funcName:fileName 查看file…...

57、python 环境搭建[for 计算机视觉从入门到调优项目]

从本节开始,进入到代码实战部分,在开始之前,先简单进行一下说明。 代码实战部分,我会默认大家有一定的编程基础,不需要对编程很精通,但是至少要会 python 的基础语法、python 环境搭建、pip 的使用;C++ 要熟悉基础知识和基础语法,会根据文章中的步骤完成 C++ 的环境搭…...

K8S-应用访问

1 service对象定位 2 Service 实践 手工创建Service 根据应用部署资源对象&#xff0c;创建SVC对象 kubectl expose deployment nginx --port80 --typeNodePortyaml方式创建Service nginx-web的service资源清单文件 apiVersion: v1 kind: Service metadata:name: sswang-ngi…...

商智C店H5性能优化实战

前言 商智C店&#xff0c;是依托移动低码能力搭建的一个应用&#xff0c;产品面向B端商家。随着应用体量持续增大&#xff0c;考虑产品定位及用户体验&#xff0c;我们针对性能较差页面做了一次优化&#xff0c;并取得了不错的效果&#xff0c;用户体验值&#xff08;UEI&…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...