将*作为fs从“fs”导入；在typescript中

Question

import * as fs from "fs";

const image1 = Media.addImage(document, fs.readFileSync("new.png"));

我的tsconfig.json看起来像这样：

  "compileOnSave": false,
  "compilerOptions": {
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": false,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "commonjs",
  },
    "include": [
        "src/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

我使用文件系统在word文档中添加图像文件，使用的是Docx，链接：https://docx.js.org/#/usage/images

但是我在导入时遇到错误，请给我解决方案。

错误:错误TypeError: fs__WEBPACK_IMPORTED_MODULE_1__.readFileSync不是函数

Answer 1

正如在上面的注释中提到的，您不能直接从浏览器访问文件系统，使用JavaScript来保证安全性。

另一种方法是使用类型为"file“的输入，并在触发事件后读取内容。

因此，在HTML中，您将拥有：

<input type="file" (change)="onFileChanged($event)" accept="image/png, image/jpeg">

在JS端，您将拥有onFileChanged方法：

onFileChanged(event) {
   const file = event.target.files[0];
   const reader = new FileReader();
   reader.onload = function(e) {
    const result = e.target.result;
    // The content of result will depend on what method you invoke on
    // reader instance.
    console.log(e.target.result)
  };

  reader.readAsText(file);
  // reader.readAsArrayBuffer(file);
  // reader.readAsBinaryString(file);
}

您必须根据您的需求完成实现...但这是您能够从文件系统读取文件内容所需的内容。

有关此方法和FileReader中的方法的更多信息，请访问此处：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload