element ui upload 组件多文件上传,最终只显示上传一个的问题
阅读原文时间:2023年07月08日阅读:1

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