el-upload上传限制文件类型

在使用element的上传时,遇到限制文件类型的需求,但是在上传不符合要求的文件时,会弹出确认删除的确认框和不符合类型的message的提示,解决方法如下:
html:

 <el-upload ref="upload"
        :file-list="form.fileList"
            action="http://..."
            :data="params"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload='handleBeforeUpload'
            :on-success="handleSuccess"
            :before-remove="beforeRemove"
            accept=".jpg,.jpeg,.png,.pdf,.PDF,.doc.docx"
            :on-exceed="handleExceed">
   <el-button size="small"
              type="primary">点击上传
   </el-button>
 </el-upload>

js:

 // 删除前(判断return出false时,会调用before-remove回调!),判断上传文件状态
    beforeRemove(file, fileList) {
      if (file && file.status === 'success') {
        return this.$confirm('确定移除' + file.name + '?', '删除', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return delObj(file.id, this.userInfo.userId)
          })
          .then(() => {
            this.$message.success('已删除')
            this.getFile()
          })
      }
    },
    // 上传之前判断类型
     handleBeforeUpload(file) {
      console.log('file===', file)
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      console.log('testmsg===', testmsg)
      // .jpg,.jpeg,.png,.pdf,.PDF
      const extension1 = testmsg === 'jpg'
      const extension2 = testmsg === 'jpeg'
      const extension3 = testmsg === 'png'
      const extension4 = testmsg === 'pdf'
      const extension5 = testmsg === 'PDF'
      const extension6 = testmsg === 'doc'
      const extension7 = testmsg === 'docx'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (
        !extension1 &&
        !extension2 &&
        !extension3 &&
        !extension4 &&
        !extension5 &&
        !extension6 &&
        !extension7
      ) {
        this.$message({
          message: '上传文件只能是.jpg,.jpeg,.png,.pdf,.PDF,.doc,.docx格式!',
          type: 'warning'
        })
        return false
      } else {
        return true
      }
    },
  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值