импорт * как фс из "фс"; в машинописи

Question

import * as fs from "fs";

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

my 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"
    ]
}

Я использую fs для добавления файла изображения в мой текстовый документ, используя Docx, ссылка: https://docx.js.org/# / Использование / images

Но я получаю ошибку при импорте, пожалуйста, дайте мне решение.

Ошибка: ОШИБКА TypeError: fs__WEBPACK_IMPORTED_MODULE_1 __. readFileSyn c не является функцией

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, вы можете go здесь: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload