Angular应用中重复上传修改后仍打开的文件时FileReader出现权限错误的问题求助

大家好，我在开发Angular应用的文件上传功能时遇到了一个棘手的权限问题，想请各位帮忙分析解决。

我的实现细节 #

首先，我封装了一个FileReaderService专门处理文件读取，目前支持JSON和CSV两种格式，代码如下：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as Papa from 'papaparse';

@Injectable({
  providedIn: 'root'
})
export class FileReaderService {
  constructor() {}

  // NOTE: the file-reader service currently only supports JSON and CSV files
  read<T = unknown>(file: File) {
    return new Observable<T>(observer => {
      const fileReader = new FileReader();

      fileReader.onload = () => {
        try {
          if (file.type === 'text/csv') {
            const jsonFile = this.csvToJson(fileReader.result as string);
            observer.next(jsonFile);
          } else {
            observer.next(JSON.parse(fileReader.result as string));
          }
          observer.complete();
        } catch (e) {
          observer.error(e);
        }
      };

      fileReader.onerror = event => {
        observer.error(event);
      };

      fileReader.readAsText(file);
    });
  }

  private csvToJson(fileReader: string): any {
    return Papa.parse(fileReader, {
      header: true,
      skipEmptyLines: true
    }).data;
  }
}

然后在组件中调用这个服务完成上传逻辑，核心代码如下：

private uploadFile(selectedFile: File) {
  this.ref.data.uploadService
    .upload(this.ref.data.entityGuid, selectedFile)
    .pipe(
      tap(progressEvent => this.handleUploadProgress(progressEvent)),
      skipWhile(progressEvent => !this.isUploadComplete(progressEvent)),
      delay(this.uploadDelay),
      finalize(() => this.cdr.detectChanges())
    )
    .subscribe({
      next: event => {
        this.handleUploadNextEvent(event);
        this.mixpanelService.sendSuccessEventMixpanel(
          ExperienceFeature.BULK_MAINTENANCE_UPLOAD,
          this.ref.data.name,
          this.ref.data.entityGuid,
          this.ref.data.entityName
        );
      },
      error: error => {
        this.handleUploadError(error);
        this.mixpanelService.sendErrorEventMixpanel(
          error,
          this.ref.data.name,
          this.ref.data.entityGuid,
          ExperienceFeature.BULK_MAINTENANCE_UPLOAD,
          this.ref.data.entityName
        );
      }
    });
}

遇到的具体问题 #

正常上传文件完全没问题，但执行以下操作时会触发权限错误：

1. 第一次上传某个文件（比如CSV），成功完成；
2. 保持该文件在编辑器（比如Excel）中处于打开状态，修改内容后保存；
3. 再次上传这个修改后的文件，就会收到错误提示：

The requested file could not be read, typically due to permission problems that have occurred after a reference to a file was acquired.

我的初步猜测 #

我怀疑是FileReader的资源没有被正确清理，导致文件句柄一直被占用，当文件被修改保存后，第二次上传时无法获取读取权限。但我不知道该如何实现合适的资源清理逻辑，想请教各位有没有遇到过类似问题，或者有什么可行的解决方案？

备注：内容来源于stack exchange，提问作者marcelomo