这篇文章上次修改于 846 天前,可能其部分内容已经发生变化,如有疑问可询问作者。
PS:这是 Vue 2 环境下使用 Element UI 上传组件的坑,其新的版本可能已经对此问题进行了修复,所以这篇文章的参考价值就见仁见智了

可以看到,上传完成的瞬间,原本有两个文件,最后就只剩下一个了!

这是我的代码:

<template>
  <main>
    <el-upload
      class="upload-demo"
      action="imgupload.php"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
      :file-list="fileList"
      list-type="picture-card"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>
  </main>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleSuccess(type, res, file) {
      this.fileList.push({
        name: file.name,
        url: file.response
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
  }
};
</script>

注意一下 this.fileList.push 这个操作,意思就是将我们成功上传的图片放置在 Vue 的 data.fileList 里面。正常逻辑嘛,前面的 :file-list 参数也绑定了它,我们自然普遍认为上传成功之后,预览的内容会根据它进行变化。

可惜 Element 本身是没有对其进行绑定的。

一旦连续 push 了两次,最终 DOM 上就只会渲染最后上传成功的那张图片出来,真是实属坑爹!

而我的解决方式是,使用另外一个名为 uploadedFile 的数组来存放原有的 fileList 该有的信息,上传成功的时候将数据写入这个数组,比较奇怪的是即便你不 pushfileList 对象,DOM 上也会自然的增加一个图片出来!

<script>
export default {
  data() {
    return {
      fileList: [],
      // 增加数组
      uploadedFiles: []
    };
  },
  methods: {
    handleSuccess(type, res, file) {
      // 替换成 uploadedFiles
      this.uploadedFiles.push({
        name: file.name,
        url: file.response
      });
    }
  }
};
</script>

如果不这样做呢?直接不对任何数组 push 呢?

handleSuccess(type, res, file) {
  // 两个数组都是空的
  console.log(this.fileList, this.uploadedFiles);
  // [], []
}

你会发现 DOM 是更新了,但是你却无法拿到已上传文件的信息了!惊不惊喜,意不意外?

我还试过不编写 handleSuccess 钩子,但是依旧不见效,:file-list 指向的数组依旧是没有任何变化的。

不知道这个情况算不算 Bug,还是 Element 本身的 Feature。我的这个方法也只是比较 Hack 的方式暂时解决了需求,感觉并不是最佳方案。如果有遇到同样问题的同学们,希望能分享一下你的解决思路,万分感激!