文件上传覆盖提示-基于element-ui

思路 ：

简单得说，利用on-change事件，每次上传文件得时候，都进行一次文件检测，当文件得个数大于1得时候，就让用户自己选择是否覆盖，如果选择是，就用数组方法取到要保留和去除对应的文件流，最少保证文件流是一项，而且是用户想要留下来的一项，然后去上传就行了

为了防止网络挂机以及接口问题出现后，文件流消失重复声明formdata实例对象，我们需要 在最后 不管成功还是失败，都重置一次上传文件和实例对象，这样就可以避免此类问题出现，不管成功还是失败，都重置一次上传文件和实例对象是这一步骤很重要得，记得这一点，此类业务就可以很容易得实现了！

<!-- HTML -->
<el-upload class="upload-demo" ref="upload" drag multiple action :limit="2" :auto-upload="false"
              :file-list="fileList" :on-change="handleChange">
</el-upload>
 <el-button type="primary" @click="onSubmit()"> 提交 </el-button>
<!-- JS-->
<script>
export default {
  data() {
    return {
      iUpload: false, // 判断文件格式是否有误
      fileData: '',// 上传文件的数据
      flieName: '',
      fileList: [],
      maxSize: 50, // 最大文件大小
    }
  },
  methods: {

    // .监控上传文件列表 - 抉择文件 -----------------------------
    handleChange(file, fileList) {
      // 文件后缀名校验
      let { size, name } = file
      // 文件大小校验   1024=1kb  1024kb=1mb
      if (size > 200 * 1024 * 1024) {
        this.$message({
          message: `请上传小于${this.maxSize}MB的文件`,
          type: 'warning'
        });
        return false
      }
      this.isUpload = true;

      // 如果文件大于一个，那就会出现弹框让用户抉择 
      if (fileList.length > 1) {
        this.$confirm('是否继续此操作，覆盖文件?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 点击确定，保留最后上传的的文件，进行覆盖上传操作
          this.fileData = new FormData();
          // 删除第一个数组项
          fileList.shift()
          this.fileData.append("file", fileList[0].raw); // 添加id,如果需要的话
          console.log(fileList[0]);
          this.flieName = fileList[0].name;
          this.fileList = fileList;
        }).catch(() => {
          // 点击取消，保留第一次上传的文件，进行取消操作
          js清空或初始化存放在FormData里面的数据
          // 删除最后一个数组项
          fileList.pop()
          this.fileData.append("file", fileList[0].raw);
          this.flieName = fileList[0].name;
          this.fileList = fileList;
        });
      } else {
        // 如果只是上传一个文件，就直接赋值，并且append
        this.fileData = new FormData();
        this.fileData.append("file", file.raw);
        console.log(file);
        this.flieName = file.name;
        this.fileList = fileList;
      }

    },
    // 上报 -----------------------------
    onSubmit() {

          if (this.fileList.length === 0) {
            this.$message({
              message: "请先选择文件",
              type: "warning",
            });
            return false;
          }

          if (!this.isUpload) {
            return false;
          }
          接口名(this.fileData).then(res => {
            if (res.code === 200) {
              // 清除文件缓存
              this.fileList = []
              this.flieName = ''
              this.$refs.upload.clearFiles()

              this.$message({
                message: '操作成功！',
                type: 'success'
              });
            }
          })
          // 不管成功还是失败，都重置上传文件和实例对象-----------------------------
          this.fileData = new FormData();
          this.fileData.append("file", this.fileList[0].raw);
        }
      });

}
</script>