将节点FileStream映像传递给HTML5 FileReader API

我如何使用节点文件系统打开文件,但发送到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); }); }); 

此代码不会抛出错误,但不起作用。


感谢以下讨论的参与者,下面的代码是一个工作解决scheme。 为了简洁,我故意忽略了error handling。

 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); } 

Interesting Posts