element ui 的upload标签如何手动上传文件?

需求:

在使用element ui的<el-upload>标签时,我们会发现添加的文件会自动完成上传。
如需手动实现上传,只需使用官方提供的auto-upload属性和submit方法


官方文档截取
官方文档截取


代码实现

为标签绑定auto-upload属性,默认值为true,传入fasle,此时添加文件便不会自动上传。

      <el-upload
      ref="upload"			// 为了调用submit方法
      :auto-upload="false" // 控制是否自动上传
      action="#"
      :http-request="upload"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :file-list="fileList"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-button @click="btnSubmit">上传</el-button>

而要使用上传功能,我们需要通过dom调用submit方法。
如上,先给标签添加ref属性,通过 this.$refs.upload.submit()调用即可。

btnSubmit() {
      this.$refs.upload.submit() // 手动上传
    },
  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值