ant-design-vue如何限制图片上传的尺寸?

    handleBeforeUpload(file, fileList) {
      // fileList 只包含了当次上传的文件列表,不包含已上传的文件列表
      // 所以长度要加上已上传的文件列表的长度
      const isLimit = this.fileList.length + fileList.length > this.limit;
      const indexOfFile = fileList.findIndex(item => item.uid === file.uid) + this.fileList.length;
      if (isLimit && indexOfFile === this.limit) {
        file.status = 'beforeUploadReject';
        file.statusText = '最多上传' + this.limit + '张图片';
        return false;
      }
      if (isLimit && indexOfFile > this.limit) {
        file.status = 'beforeUploadReject';
        return false;
      }

      const isJpgOrPng = file.type.startsWith('image/');
      if (!isJpgOrPng) {
        file.status = 'beforeUploadReject';
        file.statusText = '请上传图片';
        return false;
      }
      const isLtmb = file.size / 1024 / 1024 < this.isLtMB;
      if (!isLtmb) {
        file.status = 'beforeUploadReject';
        file.statusText = `图片不能大于${this.isLtMB}mb`;
        return false;
      }
      let self = this;
      if (this.limitHeight && this.limitWidth) {
        return new Promise((resolve, reject) => {
          // 图片宽高比例限制
          let w = 0,
            h = 0;
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            const image = new Image();
            image.src = reader.result;
            image.onload = () => {
              w = image.width;
              h = image.height;
              if (w > self.limitWidth || h > self.limitHeight) {
                self.$message.error('图片尺寸超过限制,请重新上传');
                return reject(false);
              } else {
                return resolve(true);
              }
            };
          };
        });
      }
    },

异步操作要用promise返回true或者false

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值