个人笔记-----element ui 上传单个文件---实现拖拽直接替换文件。。。。。【如有不对，欢迎指正】

本文链接：https://blog.youkuaiyun.com/sinat_42664398/article/details/96478986

本文介绍如何在Vue项目中使用Element UI实现单个文件上传，并且在选择新文件时自动替换已有文件，无需手动删除。文中表达了作者对于可能存在更好实现方式的期待，欢迎读者留言分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有个需求，vue element ui 上传文件时候，选择新文件时要自动替换之前文件，不需手动删除，
找了半天一直没找到，后来自己弄了下，不知道还有没有更好的办法；

如果有更好的办法欢迎留言！

虽然是单个文件上传，但是不要写 :limit="1" ,

这是重点，如果已经上传了一个文件，再次上传时候就删除之前的文件，然后上传新的文件。
if(uploadFiles.length > 1){
   uploadFiles.splice(0,1);
 }

<el-upload
    ref='uploadFiles'
    style="width:100%"
    class="upload-demo"
    drag
    :action="url+'/file/upload'"
    name='file_upload'
    :headers="{
      accessToken: token
    }"
    :before-upload="beforeAvatarUpload"
    :on-success="uploadSuccess"
    :on-remove="removeFile"
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip">支持格式：excel</div>
</el-upload>



// 导入上传文件
    uploadSuccess(response, file, fileList){
      this.file_id = response.data;
      var uploadFiles = this.$refs.uploadFiles.uploadFiles;
      if(uploadFiles.length > 1){
        uploadFiles.splice(0,1);
      }
      this.importSuccess = {};
      this.btnShow = true;
      this.downloadShow = false;
      console.log(this.file_id);  
    },