element ui upload 组件多文件上传,最终只显示上传一个的问题
问题描述:一次选多张图片上传的时候界面上只有一张图片显示,并且上传调用的接口次数与选择的图片数量一致,且接口已200。
JSON格式,“url”是最终显示的图片地址
{
"photoList":[
{
"photoJson":[
{
"url":""
},
{
"url":""
}
]
}
]
}
业务如图所示(图中的photoJsonInit为复制用来初始的值)

解决办法:
复制一份新的值,作为初始的photoJson数组数据给 :file-list就好,比如item.photoJsonInit= JSON.parse(JSON.stringify(item.photoJson)), photoJsonInit就是用来初始的值,后续不参与业务处理,只有在初始的时候用到一次;
原因:因为我的on-success回调方法会再往item.photoJson中写值,而:file-list会再次渲染导致出现问题
参考:https://blog.csdn.net/weixin_43574787/article/details/125557580
element ui upload 组件多文件上传,最终只显示上传一个的问题的更多相关文章
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- 使用element的upload组件实现一个完整的文件上传功能(上)
说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...
- 使用element的upload组件实现一个完整的文件上传功能(下)
本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- [转]WordPress“添加媒体”文件时只显示上传到当前文章的附件图片
使用WordPress的朋友应该都清楚,特别是喜欢图文并茂的网站,肯定离不开的就是WordPress文章编辑页面的“添加媒体”按钮,每次点击就能弹出一个插入多媒体的界面,然后页面默认就会列举加载所有最 ...
- 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结
实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...
- .net core3.1 webapi + element-ui upload组件实现文件上传
首先,先看我个人的的项目结构. 这个webapi项目是专门用来做图片上传,其中分为两个控制器:单图片上传和多图片上传.而我接下来主要讲的还是单文件上传,对于多文件的上传,我暂且尚未研究成功. 其中pi ...
- Vue 之 element-ui upload组件的文件类型
在使用element-ui的upload上传组件的时候,有时候会遇到 控制上传文件类型 的需求,只需要配置accept属性为允许的类型即可,比如: <el-upload class=" ...
- vue中使用elmentUI的Upload组件提交文件和后台接收
1.参考此博客,希望有以下知识储备 vue的路由,跨域请求,springboot2.X,html,已经阅读elementUI官网中关于upload组件的详细介绍. 2.废话不多说,直接讲解细节. 前台 ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
随机推荐
- ORACLE 查看用户下表占用空间大小
方式一: select * from user_segments s where s.BYTES is not null order by s.BYTES desc 方式二: select s ...
- (jmeter笔记)添加正则提取器和JSON提取器
添加正则提取器和JSON提取器 1.正则提取器: 返回的Token如下: 引用名称:可以理解为变量名 //调用表示${变量名} 正则表达式:"Token":"(.+?)& ...
- python_print 函数 (99乘法表)
print 函数末尾自带换行: i = 1 while i <= 5: print("*") i += 1 执行结果: * * * * * 如果想实现不换行,可以使用拼接,或 ...
- pytorch学习笔记(7)--线性层
(一)Liner Layers线性层 b 是偏移量bias 代码输入: import torch import torchvision from torch import nn from torch. ...
- mac常用命令和Git创建tag命令
一.mac命令 p.p1 { margin: 0; font: 12px ".PingFang SC" } p.p2 { margin: 0; font: 12px "H ...
- 网络IO模型_01
4种情况: 1.输入操作:等待数据到达套接字接收缓冲区: 2.输出操作:等待套接字发送缓冲区有足够的空间容纳将要发送的数据: 3.服务器接收连接请求:等待新的客户端连接请求的到来: 4.客户端发送连接 ...
- Win10解决无法访问其他机器共享的问题【转】
你不能访问此共享文件夹,因为你组织的安全策略阻止未经身份验证的来宾访问.这些策略可帮助保护你的电脑免受网络上不安全设备或恶意设备的威胁.管理员身份执行sc.exe config lanmanworks ...
- Zabbix 监控服务介绍
Zabbix 监控服务介绍 目录 Zabbix 监控服务介绍 一.Zabbix 监控服务介绍 1.1.1 Zabbix 监控服务介绍 1.1.2 如何去做监控 1.13 硬件监控 1.1.4 系统监控 ...
- 4、Redis底层原理(持久化+分布式锁)
Redis底层原理 持久化 Redis虽然是个内存数据库,但是Redis支持RDB和AOF两种持久化机制,将数据写往磁盘,可以有效地避免因进程退出造成的数据丢失问题,当下次重启时利用之前持久化的文件即 ...
- jmeter 压测的执行步骤步骤
一.设置测试参数 如图 Number of Threads:总共起多少个线程. Ramp-UP Period(in seconds):多少秒启动完所有线程. loop Count:循环次数 Sched ...