在浏览器中使用“文件类型”包的不同错误(角)

Question

我有一个角度应用程序和组件，我上传文件。现在，我想使用文件类型库检查真正文件的类型。它有大量的下载和几乎没有问题，但我无法使它工作。所以，很可能，我错过了一些基本但很关键的东西。

我以检查BLOB文件的基本示例为例：

const FileType = require('file-type/browser');
 
(async () => {
    const blob = new Blob(['<?xml version="1.0" encoding="ISO-8859-1" ?>'], {
        type: 'plain/text',
        endings: 'native'
    });
 
    console.log(await FileType.fromBlob(blob));
    //=> {ext: 'txt', mime: 'plain/text'}
})();

但它给了我一个错误：

C:/project/node_modules/readable-web-to-node-stream/lib/index.js中的误差 模块未找到:错误:无法解析C:/project/node_modules/readable-web-to-node-stream/lib/中的“流”

我添加了一个stream包(可能不是一个好的解决方案)，错误被更改为：

未定义的TypeError:未定义的类扩展值不是构造函数或空

在那之后，我认为这可能是我目前的项目太复杂，我可以尝试在一个新的小项目，所以我创建了一个。安装了file-type，并从它们的页面中获得了相同的示例(我只将const FileType = require('file-type/browser');更改为import {fromBlob} from 'file-type/browser')；

但是这里出现了另一个错误：

未定义ReferenceError:全局未定义

我将(window as any)['global'] = window;添加到polyfill.js中

未定义的ReferenceError:缓冲区未定义

我将buffer包和global.Buffer = global.Buffer || require('buffer').Buffer;添加到polyfill.js中

未定义的ReferenceError:进程未定义

在这里我放弃了。我肯定不明白，我需要一些帮助。我错过了什么？

想要添加一个stackblitz示例，但它给了我另一个错误：

导入错误，找不到文件：./

Answer 1

最后，我完全放弃了使用.fromBlob或.fromStream方法和file-type/browser部件。什么起作用：

polyfills.ts

/*
 * APPLICATION IMPORTS
 */
(window as any).global = window;
// @ts-ignore
// tslint:disable no-var-requires
window.Buffer = window.Buffer || require('buffer').Buffer;

component.ts

import { fromBuffer, FileTypeResult } from 'file-type/core';

async getTrueFileType(file: File): Promise<FileTypeResult | undefined> {
  return file.arrayBuffer().then(buffer => fromBuffer(buffer));
}

async validateFile(file) {
  const ext = await this.getTrueFileType(file);
  console.log(ext); // {ext: 'png', mime: 'image/png'}
}

有关更多详细信息，请阅读问题