如何使用node：vue应用程序内部的fs将图像保存到源目录中

Question

我正在使用vue.js建立个人投资组合网站，并且我正在尝试构建表格，以便我以后添加到投资组合中。我正在将文本数据存储在Firebase中，但我也希望能够上传和访问图片。我正在尝试通过表格上传并使用节点：fs保存以下 import {writefile}从'node：fs'

export function saveImages (data:FileList, toDoc: string) {
  const reader = new FileReader()
  const imageNames = []
  console.log(toDoc)
  for (let i = 0; i < data.length; i++) {
    imageNames.push(toDoc + '/' + data[i].name)
    reader.readAsBinaryString(data[i])
    reader.onloadend = function (e) {
      if (e.target?.readyState === FileReader.DONE) {
        const imageFile = e.target.result as string
        if (imageFile) {
          writeFile('./assets/' + data[i].name, imageFile, 'binary', (err) =>
            console.log('was unable to save file ' + data[i].name + ' => ' + err)
          )
        }
      }
    }
  }
  return imageNames
}

尝试调用SaveImages时，我会得到错误

ERROR in node:fs

Module build failed: UnhandledSchemeError: Reading from "node:fs" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.

Answer 1

正如您答案上的评论所指出的那样，Node.js- fs - 模块不能在前端使用。为什么：

1. 在开发 vue.js -app时，您应该记住，您始终必须运行开发服务器，以使应用程序编译为浏览器可读格式。结果页面不会以某些 .vue -files和 .js -files交付，但所有内容都会捆绑到 html -file和一些其他 .js -files。
2. 在运行开发服务器时，您的应用程序的源目录“躺在”服务器上，但这甚至不是传递到浏览器的目录。
3. 在生产服务器中，将为您的 vue.js -App构建静态资产，它也只包含 .html - 和 .js -Files。
4. 当客户端（浏览器）访问路由时，将将某些静态文件传递到浏览器，并且您在 .vue .vue -files中编写的所有代码将在客户端的计算机上运行，​​而不是在服务器。因此，您无法与服务器端目录进行交互。

因此，您应该查看后端服务器框架，您可以将其连接到前端，以允许用户将文件上传到服务器，这些文件将保存在服务器上。然后，您将设置VUE应用程序与后端进行通信。以下是一些其他资源：

• 带有VUE的节点模块：Stackoverflow
• ：//expressjs.com/“ rel =“ nofollow noreferrer”> express.js：node.js的流行后端框架
• express.js：交付文件
• 您可能还想看看如何发送带有Express 的静态文件，因为一旦上载文件并且服务器接收到它们，它就可以将它们存储到 static -Directory中，您可以在其中访问它们而无需使用它们单独的API路由。