vue el-upload限制文件大小及类型

限制大小:

              <el-upload
                ref="upload"
                :limit="1"
                :action="imgAction"
                :show-file-list="false"
                :http-request="modeUpload"
                accept=".pdf"
                :on-change="handleChange"
                :file-list="fileList"
              >
                <el-button size="mini" type="primary">选择文件</el-button>
              </el-upload>
    modeUpload(item) {
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles() // 清除上传的文件
      }
      this.upDateFileDialogData.uploadFileName = '' // 清除输入框文字
      this.fileItem = '' // 清除文件列表数组
      const file = item.file
      const size = file.size / 1024 / 1024
      if (size > 50) {
        this.$notify.warning({
          title: '警告',
          message: '大小必须小于50M'
        })
        return
      }
      this.fileItem = item.file // 获取要上传的文件
      this.upDateFileDialogData.uploadFileName = item.file.name // 给输入框赋值
      console.info('modeUploadfile', item.file.name)
    },

限制类型:

比如限制只能上传.pdf和.txt文件,则写法:

 <el-upload
	ref="upload"
	accept=".pdf, .txt"
 </el-upload>
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值