问题描述:一次选多张图片上传的时候界面上只有一张图片显示,并且上传调用的接口次数与选择的图片数量一致,且接口已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 组件多文件上传,最终只显示上传一个的问题的更多相关文章

  1. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

  2. 使用element的upload组件实现一个完整的文件上传功能(上)

    说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...

  3. 使用element的upload组件实现一个完整的文件上传功能(下)

    本篇文章是<使用element的upload组件实现一个完整的文件上传功能(上)>的续篇. 话不多说,接着上一篇直接开始 一.功能完善—保存表格中每一列的文件列表状态 1.思路 保存表格中 ...

  4. [转]vue Element UI走马灯组件重写

    https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...

  5. [转]WordPress“添加媒体”文件时只显示上传到当前文章的附件图片

    使用WordPress的朋友应该都清楚,特别是喜欢图文并茂的网站,肯定离不开的就是WordPress文章编辑页面的“添加媒体”按钮,每次点击就能弹出一个插入多媒体的界面,然后页面默认就会列举加载所有最 ...

  6. 使用element UI el-upload组件实现视频文件上传及上传进度显示方法总结

    实现效果: 上传中: 上传完成: 代码: <el-form-item label="视频上传" prop="Video"> <!-- acti ...

  7. .net core3.1 webapi + element-ui upload组件实现文件上传

    首先,先看我个人的的项目结构. 这个webapi项目是专门用来做图片上传,其中分为两个控制器:单图片上传和多图片上传.而我接下来主要讲的还是单文件上传,对于多文件的上传,我暂且尚未研究成功. 其中pi ...

  8. Vue 之 element-ui upload组件的文件类型

    在使用element-ui的upload上传组件的时候,有时候会遇到 控制上传文件类型 的需求,只需要配置accept属性为允许的类型即可,比如: <el-upload class=" ...

  9. vue中使用elmentUI的Upload组件提交文件和后台接收

    1.参考此博客,希望有以下知识储备 vue的路由,跨域请求,springboot2.X,html,已经阅读elementUI官网中关于upload组件的详细介绍. 2.废话不多说,直接讲解细节. 前台 ...

  10. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

随机推荐

  1. 7. 交换排序的阈值(swapThreshold)

    1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="U ...

  2. git版本回退:git reset --hard 版本号

    开发项目中会遇到各种奇葩的事情: 奇葩系列之在项目更新迭代开发正带劲的时候突然更新项目之前的项目出问题了要修复.在开发功能一半又要修复之前的问题着急上线的情况下.此时此刻git的版本回退是那么的迷人, ...

  3. Mysql Dao

    1 package dao; 2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import java.sq ...

  4. 使用jquery+layui 做一个输入搜索下拉 类似lay-search

    效  果: 因为需要做一个搜索出现下拉然后点击 自动填装input 内容的 东西. 一开始使用lay-search 的控件去弄. 但是无法控制里面的内容.所以用了一些笨方法去弄 废话不说了, html ...

  5. Docker学习——Docker 三剑客(七)

    Docker Compose 简介 Docker Compose 是 Docker 官方编排(Orchestration)项目之一,负责arg>...] [options] [COMMAND] ...

  6. 2D 消隐效果

    在触发消隐的物体(比如玩家)挂下面的代码,以及box collider,rigidbody 2d using UnityEngine; public class ColliderFader : Mon ...

  7. ZSTUOJ刷题12:Problem B.--深入浅出学算法007-统计求和

    Problem B: 深入浅出学算法007-统计求和 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 6782  Solved: 3693 Descript ...

  8. 使用php为本地html文件生成url

    1. 查看你是不是有php which php 2.  假设你的Demo.html 路径为 /Users/Sheron/Downloads/Demo.html cd /Users/Sheron/Dow ...

  9. .netcore 以widnows服务方式运行

    应用需要 Microsoft.AspNetCore.Hosting.WindowsServices 的包引用. 生成主机时会调用 IHostBuilder.UseWindowsService. 若应用 ...

  10. 解决vs未能找到导入的项目

    本文解决的问题: VS显示"vs未找到导入XXX.vcxproj 项目,请确认 import 声明中的路径正确". 找到 修改成非只读,打开后删除所有诸如这样的 Import 标签 ...