将Node FileStream图像传递给HTML5 FileReader API

Question

我该如何使用Node文件系统打开文件，使其能够被发送到并且被FileReader API读取？

const myFile = "C:\\Users\\Me\\Image.png";

fs.readFile(myFile, (error, data) => {
    const blob = new Blob(data);

    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);

    fileReader.addEventListener("load", () => {
        const image = new Image();
        image.src = fileReader.result;

        document.body.appendChild(image);
    });
});

这段代码没有抛出错误，但是它并没有起作用。

- Chunky Chunk

---

Node没有FileReader，也没有Blob、Image、document。你从哪里获取它们？ - Ry-

“Blob” 构造函数需要一个数组作为参数。new Blob([data]) 可以用吗？此外，为什么不直接使用 image.src = URL.createObjectURL(blob) 而不是使用 FileReader？另外，注意您需要转义字符串中的反斜杠，例如 "C:\\Users\\Me\\Image.png"。还应该检查 error 参数的值。 - Ry-

我的文件路径不是一个好例子，在我的应用程序中，我通过对话框检索文件路径。我正在使用FileReader来方便其他拖放代码，我希望可以重复使用它来通过对话框窗口选择图像。不幸的是，二进制编码似乎也不起作用。 - Chunky Chunk

请检查错误参数，它可能包含一些错误。 - Laxmikant Dange

TheDarkIn1978 + @Kaiido：你不需要编码。Buffer 也是 Uint8Array，而 Blob 可以接受 Uint8Array。不要使用字符串来表示二进制数据（这就是 'binary' 的作用）。无论如何，你仍然可以使用 URL.createObjectURL，甚至可以使用 <input type="file"> - 在 change 事件上读取其 files 属性，就不需要处理 fs 了（但我不知道在 Electron 中是否有效）。 - Ry-

Answer 1

感谢上面讨论中的参与者，以下代码是一个可行的解决方案。出于简洁起见，我故意省略了错误处理。

const nodeFileSystem = require("fs");

const filePath = "C:\\path\\to\\image\\file.png";

nodeFileSystem.readFile(filePath, (error, data) => {

    const blob = new Blob([data]);

    const fileReader = new FileReader();
    fileReader.readAsDataURL(blob);
    fileReader.addEventListener("load", fileReaderLoadHandler);
});

function fileReaderLoadHandler(event) {

    const fileReader = event.target;
    fileReader.removeEventListener("load", fileReaderLoadHandler);
    
    const image = new Image();
    image.src = fileReader.result;
    image.addEventListener("load", imageLoadHandler);
}

function imageLoadHandler(event) {

    const image = event.target;
    image.removeEventListener("load", imageLoadHandler);

    document.body.appendChild(image);
}

- Chunky Chunk