需要帮助定义自己的 Observable 以验证 Angular 17 中的文件上传

Question

我正在遵循 Angular 17 中的文件上传教程，但在 tut 中，他们使用

Observable.create

，它在 Angular 17 中已弃用。我已阅读有关实现新系统的文档，但它不起作用。另外，在 tut 中，他们使用类型

Observer<{ [key: string]: any }>

，但我无法为

null

分配类型，这就是这个方法称为

observer.next(null)

;

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 fileObserver = new Observable((observer: Observer<any>) => {
    filereader.addEventListener('loadend', () => {
      const arr = new Uint8Array(filereader.result as ArrayBuffer).subarray(
        0,
        4
      );
      let header = '';
      let isValid = false;
      for (let i = 0; i < arr.length; i++) {
        header += arr[i].toString(16);
      }
      switch (header) {
        case '89504E4':
          isValid = true;
          break;
        case 'ffd8ffe0':
        case 'ffd8ffe1':
        case 'ffd8ffe2':
        case 'ffd8ffe3':
        case 'ffd8ffe8':
          isValid = true;
          break;
        default:
          isValid = false;
          break;
      }
      if (isValid) {
        observer.next(null);
      } else {
        observer.next({ invalidMimeType: true });
      }
      observer.complete();
    });
    filereader.readAsArrayBuffer(file);
  });
  return fileObserver;
};

Answer 1

由于教程没有分享。

您只需将

Observer

的类型设置为

Observer<{ [key: string]: any } | null>

即可。

我们还需要将函数返回类型更改为

Promise<{ [key: string]: any }> | Observable<{ [key: string]: any } | null>

。

基本上，由于我们也返回

null

，因此我们使用打字稿联合运算符

|

来指示它也允许 null (

{ [key: string]: any } | null

)

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