如何在 Angular 中设置图片上传大小限制（例如最大 2mb）

Question

我们正在尝试设置图像大小的限制，例如最大应该为 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;
  }

我们可以在哪里以及如何设置图像的限制？

Answer 1

根据W3 documentation：

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

所以你的reader.result 要么为空，要么为 DOMString。 DOMString 是 16 位字符的字符串。

所以，要进行尺寸检查，您应该：

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

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

3. 如果length*2大于2^20就报错，其实2*2^20就是2MB有多少字节

现在让我们把它翻译成代码：

  ReadAsBase64(file): Promise<any> {
    const reader = new FileReader();
    const fileValue = new Promise((resolve, reject) => {
      reader.addEventListener('load', () => {
        const result = reader.result as DOMString;
        if (!result) reject('Cannot read variable');
        if (result.length * 2  > 2**21) reject('File exceeds the maximum size'); // Note: 2*2**20 = 2**21 
        resolve(reader.result);
      });

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

      reader.readAsDataURL(file);
    });

    return fileValue;
  }