Как установить ограничение размера загружаемого изображения (например, максимум 2 МБ) в Angular

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 документации :

При получении, если используется метод чтения readAsDataURL (), атрибут результата должен возвращать строку DOMString, которая представляет собой кодировку URL-адреса данных [RFC2397] файла или данных BLOB-объекта.

Итак, ваш reader.result равен нулю или DOMString. DOMString - это строка с 16-разрядными символами.

Итак, чтобы проверить размер, вы должны:

1. Проверьте, является ли reader.result нулевым, если оно есть, то выдайте ошибку или отклоните обещание

2. Проверьте длину вашей строки, зная, что каждый символ составляет 2 байта

3. Выдает ошибку, если длина * 2 превышает 2 ^ 20, фактически 2 * 2 ^ 20 - это количество байтов в 2 МБ

Теперь давайте переведем его в код:

  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;
  }