网站搜索

typescript - “请求的文件无法读取,通常是由于权限问题...” - 在 Angular 应用中使用 FileReader 时的错误消息


我有一个读取文件的功能,其实现方式如下:

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

我能够按照预期上传和读取文件,但问题是当我第一次尝试上传文件时,一切正常,但当我尝试修改和编辑同一个文件并在文件打开的情况下保存它(例如 CSV 电子表格)并上传更改后的文件时,我就会收到错误。

“请求的文件无法读取,通常是由于在获取文件引用后发生的权限问题。”

我正在使用 FileReader API 来读取和上传文件。我认为我需要实现某种清理,以确保文件处理程序当前没有被另一个文件使用,因为这个问题只在我尝试编辑并保存这个已打开的文件后再上传同一个文件时发生。