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

本文介绍如何使用el-upload组件实现文件上传时的多文件限制,并解决了当limit设置为1时,第二次点击上传不触发onChange方法的问题。通过调整配置和使用特定的方法,可以实现在限制文件数量的同时保持onChange事件的正常触发。

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

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();

<think>好的,我需要解决用户关于element-ui的el-upload组件如何校验文件上传状态的问题。用户提到已经上传成功,但系统仍提示需要上传,所以需要确认上传状态的方法。 首先,我应该回顾用户提供的引用内容。引用[1]中提到了el-upload的基本用法,包括accept属性限制文件格式和auto-upload设置为false。引用[2]中的代码有一个表单验证的问题,即使文件上传成功,仍提示未上传。引用[3]是关于图片上传的校验,可能涉及自定义校验规则。 用户的问题是如何确保el-upload组件正确校验文件是否已上传。可能的解决方案包括使用表单验证规则、监控上传状态、手动触发验证等。 接下来,我需要考虑element-ui的表单验证机制。el-form-item的prop需要与对应的数据字段绑定,并在rules中定义验证规则。例如,在引用[2]中,prop是"uploadWord",对应的数据字段应该是dataFrom.uploadWord,需要确保上传后更新该字段。 另一个关键点是,当auto-upload为false,需要手动处理上传,并在成功更新表单数据。比如,在on-change事件中处理文件,然后手动上传,成功后设置表单字段的值。 此外,可能需要使用组件的file-list属性来跟踪已上传文件。当文件上传成功,将文件信息添加到file-list中,并在验证规则中检查该数组的长度是否大于0。 同,要注意异步上传的情况。上传可能需要间,所以验证规则可能需要等待上传完成。可以通过Promise或者在上传成功的回调中触发表单验证。 最后,总结步骤:1. 确保表单数据绑定正确;2. 使用rules定义验证规则;3. 在上传成功更新数据;4. 手动触发表单验证。可能需要参考引用中的例子,结合el-form的validate方法来实现。</think>在element-ui中,使用`el-upload`组件校验文件上传状态可通过以下方法实现: ### 一、基础校验实现步骤 1. **绑定表单验证规则** 在`el-form`的`rules`属性中定义验证规则,通过`:file-list`或自定义变量跟踪上传状态: ```javascript rules: { uploadWord: [ { validator: (rule, value, callback) => { if (this.fileListWord.length === 0) { callback(new Error('请上传文件')); } else { callback(); } }, trigger: 'change' } ] } ``` 2. **文件状态同步** 使用`on-success`和`on-error`事件更新上传状态: ```html <el-upload :file-list="fileListWord" @success="handleSuccess" @error="handleError"> </el-upload> ``` ```javascript handleSuccess(response, file) { this.fileListWord.push(file) this.$refs.addForm.validateField('uploadWord') // 手动触发验证 } ``` ### 二、异步上传验证方案 当使用`auto-upload=false`需手动控制: 1. **保存文件引用** ```javascript onChange(file) { this.uploadFile = file.raw } ``` 2. **提交触发验证** ```javascript submitForm() { this.$refs.addForm.validate(valid => { if (valid && this.uploadFile) { // 执行手动上传逻辑 } }) } ``` ### 三、常见问题解决 1. **已上传仍提示未上传** 检查是否满足以下条件: - 表单`prop`与`file-list`绑定的变量名一致 - 上传成功回调中更新了验证字段(如`this.dataFrom.uploadWord = true`) - 验证规则中正确检查了文件列表长度或状态标识 2. **动态更新验证状态** 上传完成后需手动触发验证: ```javascript this.$nextTick(() => { this.$refs.addForm.validateField('uploadWord') }) ``` ### 四、完整实现示例 ```html <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item label="文档" prop="file"> <el-upload :file-list="fileList" :auto-upload="false" :on-change="handleChange" action="#"> <el-button>选择文件</el-button> </el-upload> </el-form-item> </el-form> <script> export default { data() { return { fileList: [], rules: { file: [ { validator: (r,v,cb) => this.fileList.length ? cb() : cb('必传字段') } ] } } }, methods: { handleChange(file) { this.fileList = [file] this.$refs.formRef.validateField('file') } } } </script> ``` ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值