elementui upload限制只能上传一个文件，且覆盖上传

咕谷古顾故

已于 2023-03-22 13:40:58 修改

阅读量2k

点赞数

文章标签： elementui javascript vue.js

于 2023-03-22 13:32:26 首次发布

原文链接：https://blog.csdn.net/u010234868/article/details/129059412

版权

在ElementUI的Upload组件中，通过设置limit为1限制只能上传一个文件，并在onChange事件中更新fileList，实现新上传的文件覆盖旧文件的功能。删除on-exceed事件处理函数，文件变更时只保留最新的文件即可。

摘要由CSDN通过智能技术生成

在使用elementui的Upload 上传组件时，如下代码中使用了limit限定了上传的文件数量，并且做了上传文件数量超限的提示。在上传一个文件后，不删除已上传文件的时候，再次上传文件，会提示超出文件数量限制，并且不会触发onChange事件：

......
<el-upload
    class="demo"
    name="file"
    ref="upload"
    :limit="1"
    :auto-upload="false"
    accept=".xlsx,.xls"
    :action="#"
    :before-upload="beforeUploadFile"
    :on-change="fileChange"
    :on-exceed="exceedFile"
    :file-list="fileList"
    :on-remove="handleRemove"
    >
    <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
    <div class="el-upload__tip" slot="tip">选择批量查询的用户清单文件</div>
</el-upload>
......
 
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件导入，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.file = file.raw;
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; // 获取最后一次选择的文件
      }
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      if (extension !== "xlsx" || extension !== "xls") {
        this.$message.warning("只能上传后缀是.xlsx、.xls的文件");
      }
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      this.fileList = [];
    },
   ......

实际项目中想要的效果是：限制只能上传一个文件，并且直接覆盖原来的文件上传。

此时删除 :limit="1"和:on-exceed="exceedFile"，

在on-change的fileChange中通过this.fileList = [fileList[fileList.length - 1]];

获取最后一次选择的文件即可。

原文链接：elementui upload限制只能上传一个文件，且覆盖上传_每一天，每一步的博客-CSDN博客