vue中使用el-upload上传图片限制图片格式和大小

<el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :data="uploadToken"
            class="avatar-uploader"
            accept=".jpg,.jpeg,.png"
            action="https://upload.qiniup.com">
            <!-- http://up.qiniup.com -->
            <img
              v-if="form.avatar"
              :src="form.avatar"
              class="avatar">
            <img
              v-else
              src="~/assets/images/user-logo.png"
              class="avatar">
          </el-upload>

使用accept,同时要加以格式判断

    beforeAvatarUpload(file) {
      console.log('file', file)
      let types = ['image/jpeg', 'image/jpg', 'image/png'];
      const isImage = types.includes(file.type);
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!');
      }else{
        this.uploadToken.key=`upload_pic_${Date.parse(new Date())}${file.name}`
      }
    },
const isLtSize = file.size / 1024 / 1024 < 5;
 if (!isLtSize) {
          this.$message.error('上传图片大小不能超过 5MB!');
        }

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值