如何在 vue 应用程序中使用 node:fs 将图像保存到源目录中

Question

我正在使用 Vue.js 构建一个个人投资组合网站，并且我正在尝试构建一个表单以允许我稍后添加到我的投资组合中。我将文本数据存储在 firebase 中，但我也希望能够上传和访问图片。我正在尝试通过表单上传并使用 node:fs 保存以下内容 import { writeFile } from '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-模块不能在前端使用。原因如下：

在开发 vue.js 应用程序时，您应该记住，您始终需要运行开发服务器才能将应用程序编译为 browser-readable 格式。生成的页面不会作为某些 .vue 文件和 .js 文件提供，但所有内容都将捆绑到一个 html 文件和一些额外的 .js 文件中。
在开发服务器上运行时，您的应用程序的源目录在服务器上 'lying'，但这甚至不是传送到浏览器的目录。
在生产服务器中，将为您的 vue.js-app 构建静态资产，它也只包含 .html- 和 .js- 文件。
当客户端（浏览器）访问一个路由时，一些静态文件会被传送到浏览器，你在.vue-文件中写的所有代码都会运行在客户端的机器，而不是在服务器上。所以你不能与 server-side 目录交互。

因此，您应该考虑一个后端服务器框架，您可以将其连接到前端以允许用户将文件上传到服务器，这些文件将保存在服务器上。然后，您将设置您的 vue 应用程序以与后端通信。这里有一些额外的资源：

Node modules with vue: Whosebug
Express.js: popular backend framework for Node.js
Express.js: Deliver files
Blog article on Express.js file upload (Attacomsian)
您可能还想看看如何发送 static files with express，因为一旦文件上传并且服务器收到它们，它可以将它们存储到 static 目录中，其中您无需使用单独的 API-routes.

如何在 vue 应用程序中使用 node:fs 将图像保存到源目录中

How to use node:fs inside of a vue app to save images into source directory

file-storage

node.js

vue.js