Question

试图验证MIME类型

问题在fileReader.result的第12行。...不确定我在代码中出了什么错。

import { AbstractControl } from '@angular/forms';
import { Observable, Observer } from 'rxjs';

export const mimeType = (
  control: AbstractControl
): Promise<{ [key: string]: any }> | Observable<{ [key: string]: any }> => {
  const file = control.value as File;
  const fileReader = new FileReader();
  const frObs = Observable.create(
    (observer: Observer<{ [key: string]: any }>) => {
      fileReader.addEventListener('loadend', () => {
        const arr = new Uint8Array(fileReader.result).subarray(0, 4);
        let header = '';
        let isValid = false;
        for (let i = 0; i < arr.length; i++) {
          header += arr[i].toString(16);
        }
        switch (header) {
          case '89504e47':
            isValid = true;
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
          case 'ffd8ffe3':
          case 'ffd8ffe8':
            isValid = true;
            break;
          default:
            isValid = false; // Or you can use the blob.type as fallback
            break;
        }
        if (isValid) {
          observer.next(null);
        } else {
          observer.next({ invalidMimeType: true });
        }
        observer.complete();
      });
      fileReader.readAsArrayBuffer(file);
    }
  );
  return frObs;
};

Answer 1

fileReader.result的类型为string | ArrayBuffer，这意味着它可以是string或ArrayBuffer，具体取决于调用读取文件的方法。 Uint8Array的构造函数只能接受ArrayBuffer，这就是您收到错误的原因，因为对于编译器，结果也可以是string。一种简单的解决方案是，通过像这样投射它来说出我知道这将是一个ArrayBuffer：

const arr = new Uint8Array(fileReader.result as ArrayBuffer).subarray(0, 4);

更好的解决方案是先验证结果是否实际上是您期望的类型，然后编译器将不会抱怨，因为它知道该类型是正确的类型。

if (fileReader.result instanceof ArrayBuffer) {
  const arr = new Uint8Array(fileReader.result).subarray(0, 4);
  // the rest of your code
} else {
  throw new Error('Unexpected result');
}

不能将类型'string'分配给类型'ArrayBuffer | SharedArrayBuffer | ArrayLike <number>'

1 个答案: