这篇文章上次修改于 662 天前，可能其部分内容已经发生变化，如有疑问可询问作者。
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 该有的信息，上传成功的时候将数据写入这个数组，比较奇怪的是即便你不 push 给 fileList 对象，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 的方式暂时解决了需求，感觉并不是最佳方案。如果有遇到同样问题的同学们，希望能分享一下你的解决思路，万分感激！