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() 方法。

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

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

相关文章

Qt/QML编程学习之心得:Timer的使用(22)

Qt中timer计时器如何使用? Timer的创建: void InitTimer(){myTimer = new QTimer(q);myTimer->setInterval(100); // 100msmyTimer->setSingleShot(true); //只运行一次的计时器QObject::connect(myTimer,SIGNAL(timeout()),q,SLOT(onTimeOut()));myTimer->start(…

pythonMatplotlib一:pyplot模块

pyplot模块&#xff1a;是Matplotlib的主要模块&#xff0c;提供了类似于MATLAB的绘图接口。通过导入matplotlib.pyplot&#xff0c;可以使用其中的函数来创建和定制各种类型的图表。 1.绘制折线图&#xff1a; import matplotlib.pyplot as pltx [1, 2, 3, 4, 5] y [6, 7,…

提供小红书笔记详情API的使用说明

小红书笔记详情API的使用说明&#xff1a; 注册与认证&#xff1a; 在使用小红书笔记详情API之前&#xff0c;首先需要在小红书开放平台上注册并创建一个应用。完成注册后&#xff0c;你将获得一个appKey和appSecret&#xff0c;这两个参数在后续的API调用中是必需的。 API调用…

Oracle分区表

文章目录 A. varchar2类型时间字段(20240102)分区实战1. 表要不要分区2. 将已经存在的表改造为分区表(时间字段&#xff0c;varchar2类型)3. 增加分区3.1 增加分区3.2 置换分区&#xff0c;不会复制索引&#xff0c;不要用这种语法建表&#xff0c;这是专门为置换分区用的3.3 分…

SonarQube 漏洞扫描

SonarQube 漏洞扫描 一、部署服务 1.1 docker方式部署 #安装docker curl -L download.beyourself.org.cn/shell-project/os/get-docker-latest.sh | sh yum install -y docker-compose #进去输入:set paste可以保证不穿行 [rootlocalhost sonar]# vim docker-compose.yml v…

【正点原子STM32连载】第二十六章 USMART调试实验 摘自【正点原子】APM32E103最小系统板使用指南

1&#xff09;实验平台&#xff1a;正点原子APM32E103最小系统板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id609294757420 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/docs/boards/xiaoxitongban 第二…

MySQL主从配置【linux版】

MySQL主从配置 参考文档 https://blog.csdn.net/richie696/article/details/114261284 步骤 准备3台虚拟机&#xff0c;并在虚拟机上安装mysql服务 修改3台主机的mysql服务的server-uuid,保证他们的uuid都不同。UUID可以找网站生成。 vim /var/lib/mysql/auto.cnf配置主库【…

springboot进行Swagger配置

简单介绍一下Swagger&#xff1a; Swagger是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法&#xff0c;参数和模型紧密集成到服务器端的代码&#xff0c;允许…

java基于SSM的游戏商城的设计与实现论文

基于SSM的游戏商城的设计与实现 摘 要 当下&#xff0c;正处于信息化的时代&#xff0c;许多行业顺应时代的变化&#xff0c;结合使用计算机技术向数字化、信息化建设迈进。以前相关行业对于游戏信息的管理和控制&#xff0c;采用人工登记的方式保存相关数据&#xff0c;这种以…

springcloud实现配置的动态获取

springcloud实现配置的动态获取 依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId> </dependency>使用注解Value Value("${spring.dataId.versionId}&quo…

一篇博客或论文,多少字数比较合适?

一篇博客&#xff0c;多少字数比较合适&#xff1f; 博客的字数并没有严格的规定&#xff0c;但为了兼顾读者的阅读体验和搜索引擎优化&#xff08;SEO&#xff09;&#xff0c;一般建议以下参考范围&#xff1a; 简短型博客&#xff1a;约300-500字。这种长度适用于发布简短观…

【C++】内存对齐

本篇文章介绍C中的内存对齐&#xff0c;后续介绍C的union和C的variant的时候&#xff0c;需要用到这部分的知识。 占用内存 先回忆下C各个数据类型占用的内存大小&#xff1a; int&#xff1a;所占内存大小&#xff1a;4byte 32bit&#xff1b;char&#xff1a;所占内存大小…

x-cmd-mod | zuz - 压缩或解压文件

目录 简介首次用户子命令x zuz zx zuz uzx zuz uzrx zuz ls 相关链接 简介 zuz 为 x-cmd 中的必用模块之一&#xff0c;提供压缩与解压文件的功能。 x z 就是调用 x zuz z&#xff0c;可将目标文件压缩根据后缀名成指定格式&#xff0c;x uz 则可以解压任何格式的压缩包 首次…

四个模型建模及数据分析整理(基于Titanic数据集)

目录 介绍&#xff1a; 二、数据 2.1引用数据 2.2检查缺失数据 2.2.1手动检查缺失数据 2.2.2查看某一个特征值为空数据 2.3补充缺失数据 2.3.1盒图 2.3.2手动用均值填补缺失数据 2.3.3手动用类别填补缺失数据 三、数据分析 3.1男女生存比例 3.2男女生存数 3.3船舱级…

ROS学习笔记(11)进一步深入了解ROS第五步

0.前提 我在学习宾夕的ROS公开课的时候发现&#xff0c;外国的对计算机的教育和国内的是完全不一样的&#xff0c;当你接触了外国的课程后回头看自己学的会发现好像自己啥也没学。我这里可以放出来给大家看一下。 1.Python and C 2.Python PDB Tutorial&#xff1a;Python Deb…

PyTorch|构建自己的卷积神经网络

如何搭建网络&#xff0c;这在深度学习中非常重要。简单来讲&#xff0c;我们是要实现一个类&#xff0c;这个类中有属性和方法&#xff0c;能够进行计算。 一般来讲&#xff0c;使用PyTorch创建神经网络需要三步&#xff1a; 继承基类&#xff1a;nn.Module 定义层属性 实现…

动态规划(不同路径1,不同路径2,整数拆分)

62.不同路径 力扣题目链接(opens new window) 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。…

SQL Error 1366, SQLState HY000

SQL错误 1366 和 SQLState HY000 通常指的是 MySQL 与字符编码或数据截断有关的问题。当尝试将数据插入具有与正在插入的数据不兼容的字符集或排序规则的列时&#xff0c;或者正在插入的数据对于列来说过长时&#xff0c;就会出现此错误。 解决方式&#xff1a; 检查列长度&am…

强大的按钮类CButtonST

转自&#xff1a;哈哈 强大的CButtonST_cbuttonst demo-CSDN博客 这里给大家介绍强大的按钮类CButtonST&#xff0c;可以使您的程序锦上添花。 CButtonST类主要包括BtnST.h、BtnST.cpp、BCMenu.h和BCMenu.cpp四个文件。先将上述4个文件复制到自己的工程&#xff0c;然后在VC开…

手机上连网络转接app,电脑连接手机,共用网络转接app的办法

方法一&#xff0c;&#xff08;不推荐&#xff09; 因为太简单了所以写一下 电脑安装MuMu模拟器&#xff0c;之后安装网络转接app&#xff0c;这个模拟器设置了从电脑上安装app和&#xff0c;安卓与电脑同步文件夹功能&#xff0c;实现文件共享。所以直接用就可以了。 方法二…