如何在Angular中设置图片上传大小限制(例如,最大2mb)

时间:2019-01-15 09:33:28

标签: angular typescript angular6 ng2-file-upload

我们正在尝试设置图像大小的限制,例如最大应该为2mb。我们正在使用ng2-file-upload。您可以在下面看到代码:

uploader: FileUploader = new FileUploader({
    url: URL,
    disableMultipart: true
  });
...
...
OnFileSelected(event) {
    const file: File = event[0];

    this.ReadAsBase64(file)
      .then(result => {
        this.selectedFile = result;
      })
      .catch(err => console.log(err));
  }

  Upload() {
    if (this.selectedFile) {
      this.usersService.AddImage(this.selectedFile).subscribe(
        data => {
          this.socket.emit('refresh', {});
          console.log(data);
        },
        err => console.log(err)
      );
    }
  }

  ReadAsBase64(file): Promise<any> {
    const reader = new FileReader();
    const fileValue = new Promise((resolve, reject) => {
      reader.addEventListener('load', () => {
        resolve(reader.result);
      });

      reader.addEventListener('error', event => {
        reject(event);
      });

      reader.readAsDataURL(file);
    });

    return fileValue;
  }

我们在哪里以及如何在图片上设置该限制?

1 个答案:

答案 0 :(得分:1)

根据W3 documentation

  

获取时,如果使用readAsDataURL()读取方法,则result属性必须返回DOMString,该DOMString是文件或Blob数据的数据URL [RFC2397]编码。

因此,您的for names in playlist_list: print(names['name']) print '\n' 为null或DOMString。 DOMString是具有16位字符的字符串。

因此,要进行尺寸检查,您应该:

  1. 检查reader.result是否为null,如果为null,则抛出错误或拒绝Promise

  2. 检查字符串的长度,知道每个字符都是2个字节

  3. 如果length * 2大于2 ^ 20,则会引发错误,实际上2 * 2 ^ 20是2MB中有多少字节

现在让我们将其翻译为代码:

reader.result