el-upload文件上传on-chang等函数失效

        今天在用el-upload做文件上传时,绑定的on-change、on-remove、on-exceed函数都失效了,代码如下:

<el-upload
      class="el-upload__div"
      ref="upload"
      action=" "
      :auto-upload="false"
      :file-list="fileList"
      :on-change="handleChange()"
      :limit="1"
      accept=".docx"
      :on-exceed="handleExceed()"
      :on-remove="handleRemove()"
    >      
</el-upload>

方法如下:

handleChange(file) {
    console.log("选取新文件", file);
    this.file = file;
},
handleExceed(){
    console.log("只能选择一个文件");
},
handleRemove(){
    console.log("移除文件");
},

开始以为是el-upload组件使用方式不对,经过各种试探,原来是:on-change后面的函数不能加小括号:

 问题解决

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-upload 是饿了么团队开发的一个 Vue.js 文件上传组件,可以方便地在前端实现文件上传功能。使用 el-upload 组件,你只需要在 Vue.js 模板中添加一个 el-upload 标签,并设置相应的属性,就可以实现文件上传功能。 下面是一个使用 el-upload 组件实现文件上传的示例代码: ```html <template> <div> <el-upload class="upload-demo" action="/upload" :on-success="handleSuccess" :before-upload="beforeUpload" :headers="headers" :limit="3" :data="{foo: 'bar'}" :accept="'image/*'"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> <script> export default { data() { return { headers: { Authorization: 'Bearer ' + localStorage.getItem('token') } } }, methods: { handleSuccess(response, file, fileList) { console.log(response) }, beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' const isLt2M = file.size / 1024 / 1024 < 2 if (!isJPG) { this.$message.error('上传图片只能是 JPG/PNG 格式!') } if (!isLt2M) { this.$message.error('上传图片大小不能超过 2MB!') } return isJPG && isLt2M } } } </script> ``` 在上面的代码中,我们设置了 el-upload 的 action 属性来指定上传文件的地址,headers 属性来指定上传文件时需要发送的请求头,before-upload 属性来指定上传文件前需要进行的验证,limit 属性来指定上传文件的数量限制,data 属性来指定上传文件时需要发送的数据,accept 属性来指定上传文件的类型限制。同时,我们还设置了 el-upload 的 trigger 和 tip 插槽,用来自定义上传按钮和提示信息。 需要注意的是,el-upload 组件需要配合后端进行使用,后端需要提供相应的接口来接收上传的文件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值