el-upload实现只上传一个文件且再次上传不会覆盖前面的文件的问题

 这部分的逻辑是只需要上传一张图片,所以我在代码里面设置了最大上传数量:limit = 1

   <el-upload
    ref="upload"
    class="upload-demo"
    :action="baseUrl + '/upload/doAction'"
    :data="pramsData"
    :on-success="uploadSucess"
    :multiple="false"
    :limit="1"
    :on-change="handleChange"
    :headers="uploadHeader"
    :file-list="fileList"
    list-type="picture"
    >

但是这样设置之后会有一个bug,再次上传不能覆盖上次的,需要手动清除才可以上传,因为上传的数量设置成了一张，所以当上传第二张的时候里面的方法那些根本不会再次执行了

所以我的解决方式就是把最大上传数量设置成两张,通过去修改fileList里面的数组去保留最后一张

   <el-upload
    ref="upload"
    class="upload-demo"
    :action="baseUrl + '/upload/doAction'"
    :data="pramsData"
    :on-success="uploadSucess"
    :multiple="false"
    :limit="2"
    :on-change="handleChange"
    :headers="uploadHeader"
    :file-list="fileList"
    list-type="picture"
    >

开始的话我是直接用第二张覆盖第一张,结果会报一个错误

 handleChange(file, fileList) {
      //先把原数组清空,在把最后一张赋值给新数组,但是主要会改变原数组,不可取
      this.fileList = [];
      this.fileList = fileList[1]
  },

 Cannot set properties of undefined (setting 'status')

原因是因为:fileList不能改变这个原数组,所以这里我们使用slice方法进行切割,slice方法不会改变原数组,这样就可以解决这个报错了,并且可以保持只能上传一张图片,再次上传能进行更新。

//方法1
handleChange(file, fileList) {
      // slice(-1)保留最后一个文件,不会改变原数组
      this.fileList = fileList.slice(-1);
},

//方法二
    handleChange(file, fileList) {
      // 不会改变fileList
      const newFileList = fileList.slice(-1);
      // fileList直接赋值this.fileList不会改变的原因是因为他们两个的指向是一致的
      this.fileList = newFileList;
   },