Element UI 上传文件Upload 限制上传文件格式


          <el-upload
            class="upload-demo"
            :limit="3"
            :before-upload="beforeUpload"
            :action="fileUpload"
            :on-exceed="handleExceed"
            :on-success="handleSuccessZl"
          >
            <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>

如果要在上传前判断文件类型,并且进行上传拦截,需要通过before-upload钩子函数去进行拦截

 文档中规定,通过返回的布尔值或者promise的reject可以截停上传

beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      const extension3 = testmsg === 'doc'
      const extension4 = testmsg === 'pdf'
      if (!extension && !extension2 && !extension3 && !extension4) {
        this.$message({
          message: '上传文件只能是pdf、doc、xls、xlsx格式!',
          type: 'warning'
        })
      }
      return extension || extension2 || extension3 || extension4
    },

通过截取文件的后缀名,根据自己定义的变量进行匹配,若不符合责返回false截停上传

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值