el-upload上传文件时,不触发onchange方法

17 篇文章 2 订阅

el-upload上传文件时,只能上传一个文件,将limit设为1,结果出现第二次点击上传时不触发on-change方法,解决方法:
在HTML中:

	<el-upload
            action=""
            ref="uploadFile"
            style="display: inline-block;"
            :show-file-list="false"
            :on-change="ChangeFile"
            :auto-upload="false"
            :limit="2"
            accept=".xlsx,.xls">
            <el-button size="small">选择文件...</el-button>
            <el-input v-model="batchUpload.fileName" placeholder="请选择文件" disabled size="small" style="width:367px;margin:0 10px;"></el-input>
    </el-upload>

在方法中:

// 文件改变,判断文件类型方法
      ChangeFile(file,fileList ) {
        // 解决上传文件limit为1时,不触发onchange方法,在第二次调用的时候将第一个文件删除
        if(this.$refs.uploadFile.uploadFiles.length>1){
          this.$refs.uploadFile.uploadFiles.shift();
        }
        // 给文件名赋值
        this.batchUpload.fileName = file.name;
        // 判断文件类型
        if (file.name.split('.').pop() !== 'xlsx' 
        && file.name.split('.').pop() !== 'xls'
        && file.name.split('.').pop() !== 'XLSX' 
        && file.name.split('.').pop() !== 'XLS') { // 类型有可能大写,记得要写
          fileList = []
          this.batchUpload.fileList = []
          this.$message({
            message: '请上传excel文件',
            type: 'error'
          })
        } else {
          this.batchUpload.fileList = fileList.length > 0 ? [file.raw] : [];
        }
      },

或者,单次上传后调用this.$refs.uploadFile.clearFiles();

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值