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

在使用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]]; 获取最后一次选择的文件即可。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值