u-upload组件上传图片重复的问题和解决办法

[lioilLRM]

需要实现的功能： 1.点击上传图标，弹窗后使用 u-upload 组件进行图片上传，然后将上传成功的图片显示出来。 2.如果已经有了图片，弹窗使用 u-upload 组件将图片展示出来。

代码实现如下：

使用了 fileList 属性显示已上传的图片文件列表。

存在的问题： 上传完成后的图片和本地的图片都重复显示出来了，虽然组件在 watch fileList使用方法进行过滤url了，但是过滤不完整。如下图

解决方式： 在 watch fileList 通过判断 val 里面的response 值进行过滤就可以了。如下图

[mirenfawei]

为什么我的val里的值是空

[nadirvishun]

这个内部list和filelist不同步是有点坑，只检测新增的。不修改源码可以用类似的方法，使内部的list和filelist保持一致：

      //上传后
      onSuccess(data, index, lists, name) {
        if (data.code === 200) {
          //移除掉blob,改成返回的url,否则再次请求接口修改file-list原有的blob文件并不会删除
          //主要是框架逻辑问题，内部的list并不是file-list,而是对比如果file-list有增加则增加，并不减少
          this.$refs.xxxx.remove(index);//通过refs来移除掉
          this.fileList.push({url: data.url});//重新加上服务端返回的url路径的
        } else {
          this.$u.toast("上传失败");
          this.$refs.xxxx.remove(index);//移除预览
        }
      },
     //删除后
     onRemove(index, lists, name) {
        //同样也删除掉这里
        this.fileList.splice(index,1);
        ...
      },

[hujialianghuwei]

解决问题的方法都有了 官方什么时候改进啊