如何处理 FileReader 在 TypeScript 中返回 ArrayBuffer 或 String

Question

我已经绕了一圈，现在是时候寻求帮助了。我有以下（Typescript）服务可以打开文件阅读器，并根据文件类型调用 readAsText() 或 readAsArrayBuffer()。我有一个用于 fileReader 将返回的文本的包装类（MyDocument），以及一些关于文档的元数据。在 MyDocument 类中，我定义了一个名为 docContent: string 的字段。这就是麻烦的开始。由于选择 readAsText 或 readAsArray 缓冲区的条件 if 语句（在代码中加粗），编译器不喜欢将 fileReader 结果分配给 docConent，因为它可能是字符串或 ArrayBuffer。所以我将字段修改为： 文档内容：字符串 | ArrayBuffer 想我有多聪明。但是现在该字段可以是字符串或 ArrayBuffer，编译器不会让我操作 docContents 字段（如 split('\n')，因为 split 不属于 ArrayBuffer。我知道必须有一个更优雅问题的解决方案，但我离它太近了，看不清楚。希望有任何帮助。

    public readFile(files: FileList): MyDocument {
    this.myDocument = new MyDocument();

    if (files && files[0] && files[0].size > 0) {
        this.fileToRead = files[0];
        this.myDocument.fileName = this.fileToRead.name;
        this.myDocument.fileSize = this.fileToRead.size;
        this.myDocument.fileType = this.fileToRead.type;
    }
    else {
        const message = "Either no file selected, or file has zero size";
        confirm(message);

    }


    if (this.fileToRead) {
        var fr = new FileReader();

        fr.onloadend = () => {
            if (this.myDocument.fileType == "text/plain") {
                this.myDocument.docContents = fr.result;
            } else {
                let extractedText = this.extractTextUsingSolr(fr.result);
            }

        }

        ***if (this.fileToRead.type == 'text/plain') {
            fr.readAsText(this.fileToRead);
        }
        else {
            fr.readAsArrayBuffer(this.fileToRead);
        }***

        return this.myDocument;
    }
    else {
        console.log('No file selected!');
        return;
    }

}

~

为了完整起见，这里是 MyDocument 类，当我尝试执行 docContents.split("\n") 时，编译器会抱怨。

export class MyDocument {
fileName: string;
fileType: string;
fileSize: number;

numWords: number;
numSents: number;
docWords: string[]; 
docContents: string | ArrayBuffer;

processDocument(): void {
    const sents = [];
    const lines = this.docContents.split("\n");
    let sentWords = [];
    }
}

Answer 1

快速修复

if (typeof this.docContents === 'string') {
   lines = this.docContents.split("\n");
} else {
  // dealing with ArrayBuffer
  // google on methods in ArrayBuffer object you can use
}

但我个人不喜欢这种方法。我会使用 2 个不同名称的不同属性。一个用于 ArrayBuffer，另一个用于文本字符串。