vue+element 文件上传 重复上传能覆盖上一个文件（excel）

官方文档指路文件上传

实际应用

我这边的需求是 仅支持上传一个文件，并且能重新上传覆盖，所以在on-change事件里 对 fileList 数据进行了处理。

// 页面按钮
<el-upload
     accept=".xls, .xlsx"
      action="#"
      :before-upload="beforeAvatarUpload"
      :http-request="getfileUpload"
      :on-change="getValChange"
      :file-list="fileList"
      v-model="ruleForm.fileUrl">
      <el-button size="small" type="primary">点击上传</el-button>
      <span style="margin-left:10px">只能上传excel文件</span>
</el-upload>
//js fileUpload方法主要是对请求的封装
 /***
  * 文件上传
  */
 export function fileUpload(data){
    let url = '/card/scrapApply/uploadScrapCards';
    return postResponse(url,data,{contentType:'form'})
 }
 //引入应用 
 import { fileUpload } from "../../../api/apiStock";
 //data里定义 fileList 数组来展示上传的文件
 data(){
  return {
      fileList: [],
  }
 }
 // 上传触发前 对文件格式的校验只校验了excel文件
 beforeAvatarUpload(file) {
      let FileExt = file.name.replace(/.+\./, "").toLowerCase();
      let flag = ["xls", "xlsx"].includes(FileExt);
      if (!flag) this.$message.error("只能上传excel文件!");
      return flag;
    },
// 文件值改变时触发 change事件
    getValChange(file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]] 
      }else{
        this.fileList = fileList[0]
      }
    },
  // 上传调用后台接口
  getfileUpload() {
      let formData = new FormData();
      formData.append("file",  this.fileList[0].raw);
      fileUpload(formData).then((res) => {
        this.$message.success("上传成功!");
      });
    },

效果图展示：

题外话： 如果想像官方文档一样 上传成功后 文件后面有个对号，可以更改css

.el-upload-list__item-status-label{
   display: block;
}
/* 隐藏文件 删除按钮  */
.el-upload-list__item:hover .el-icon-close {
    display: none;
}

效果如下：