如何将文件夹/文件的内容存储到JavaScript中的变量？

Question

当我遇到一个看似简单的问题时，我正在玩 face-api：如何将变量声明为等于本地文件的内容？

我了解在 HTML 中设置图像或脚本标签的内容时如何导航目标内容的文件夹。但是，我不太清楚如何在 JavaScript 中最好地做到这一点。

• 例如，假设我有一个名为“Images”的文件夹，其中包含一个名为“beach.jpeg”的文件。 如果我想通过 face-api 之类的东西访问所述 jpeg 的内容以供将来使用，我将如何在我的文件和我的 JavaScript 之间建立连接？

它看起来像下面这样吗：

const beachImage = Images/beach.jpeg

我觉得格式化缺少一些东西来辨别我打算访问本地文件而不是其他东西。 感谢您的任何输入：:)

编辑：我忘了说明我是在浏览器中运行它而不是使用 node.js。很抱歉没有提到这一点。

Answer 1

我假设你正在运行 nodejs。 您可以通过这种方式读取本地图像的内容

const { readFileSync } = require('fs');
const beachImage = readFileSync('Images/beach.jpeg', 'binary'); // put the encoding you need

您可能还需要一个__dirname来构建文件的正确路径

编辑 html 方法。 HTML with JS 是关于触发和捕获事件的。 下面是一个示例，其中包含用于让用户选择图像的输入标签。 它显示选择的图像。 您可以在操作function 中对该图像执行某些操作。

<img id="image" src="" width="100" height="100">
<input id="input" name="photo" type="file" accept="image/*">
<button id="action-trigger">Trigger Action</button>

<script>
    window.onload = attachEventHandlers;

    function attachEventHandlers() {
        document.getElementById("input").onchange = handleUploadedImage;
        document.getElementById("action-trigger").onclick = action;
    }
  
    function handleUploadedImage(event) {
        const src = window.URL.createObjectURL(event.target.files[0]);
        document.getElementById('image').src = src;
    }

    function action() {
        const image = document.getElementById('image');
        if (image.src) {
            // do something with image.src
            // const detections = await faceapi.detectAllFaces(input) // make sure you imported face-api.js
        } else {
            alert('Please upload an image first');
        }
    }
  
</script>