一、介绍

今天遇到一个问题，el-upload手动上传如果上传重复文件不让它上传，一直解决不了，接下来说一下这个问题

二、代码

jsx
<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    multiple
    :file-list="fileList"
    :auto-upload="false"
    :on-change="handleChange"
    list-type="picture"
    ref="upload"
  >
    <el-button size="small" type="primary" @click="clickOpen">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },

  methods: {
    clickOpen() {},

    handleChange(uploadFile, uploadFiles) {
      // 更新 fileList 以反映当前上传文件的状态
      this.fileList = uploadFiles;

      // 检查文件大小
      if (uploadFile.size / 1024 / 1024 > 2) {
        this.$message.error("文件大小不能超过2MB");
        this.removeFile(uploadFile);
      }

      // 使用 filter 方法检查重复文件
      const duplicateFiles = this.fileList.filter(
        (file) => file.name === uploadFile.name
      );

      if (duplicateFiles.length > 1) {
        this.$message.error("不能上传重复的文件");
        this.removeFile(uploadFile);
      }
      console.log("this.fileList: ", this.fileList);
      console.log("uploadFile: ", uploadFile);
    },

    removeFile(file) {
      const index = this.fileList.indexOf(file);
      if (index !== -1) {
        this.fileList.splice(index, 1);
      }
    },
  },
};
</script>

三、解释

（1）更新 fileList

• 这句话特别重要否则你会出现意想不到的错误

jsx
  this.fileList = uploadFiles;

handleChange 方法首先更新 fileList，以确保它反映了当前的上传文件状态。然后，它进行文件大小和重复性检查。如果文件需要被移除，removeFile 方法会从 fileList 中移除该文件，这将自动更新页面上显示的文件列表。