elementUi-upload上传文件限制

实习第一天，mt给了一个elementUI使用upload上传文件的bug，需求是文件首次上传必填，并且文件只能上传一个，后续上传覆盖之前上传的文件

一直用的是vue3，把项目拉下来一时间都不知道从哪里看起，找到问题出现的组件后，发现是使用的elementUi的upload组件，于是去看了一下文档

发现有个limit属性，添加limit后发现并不能满足后续上传文件覆盖已有文件的需求，此外项目代码中在on-success获取最后一个上传的文件，在首次上传时存在可上传多个文件的缺陷，最后使用on-change，在有文件状态发生改变时，获取最后一个文件

        <el-upload
            ref="my-upload"
            class="upload-demo"
            drag
            :action="postUrl"
            name="file"
            :show-file-list="true"
            :data="form"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-progress="handleProgress"
            :on-error="handleError"
            :before-upload="handlerBeforeUpload"
            :on-success="handleSuccess"
            :on-change="handleChange"
            :limit="1"
            >
            <i class="el-icon-upload"></i>

            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>

    handlerBeforeUpload(){      
      if(this.fileList.length > 0) {
        return this.$confirm('文件已上传,再次上传将覆盖已上传文件？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }) 
      }else{
        return true;   
      }
    },
    // 文件状态变化时
    handleChange(file,fileList){
      if(this.fileList.length>0){
        this.fileList=[fileList[fileList.length-1]]
      }    
    },
    
    handleSuccess(event, file, fileList) {  
      this.fileList = fileList
      this.uploading = false
      // 提醒用户文件更新成功
      this.$message({
        message: '文件上传成功',
        type: 'success'
      });
    }, 

就这样完成了实习的第一个任务✌