angular - 类型 'string' 不可分配给类型 'ArrayBuffer | 共享数组缓冲区

问题描述

尝试验证 mime 类型

问题在第 12 行，带有 fileReader.result.... 不确定我在代码中到底哪里出错了。任何帮助是极大的赞赏

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

标签： angulartypescript

fileReader.resultis 类型，这string | ArrayBuffer意味着它可以是 astring或ArrayBuffer取决于您调用哪个方法来读取文件。for 的构造函数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');
}

angular - 类型 'string' 不可分配给类型 'ArrayBuffer | 共享数组缓冲区 | 类数组'

问题描述

解决方案

推荐阅读