Express.js 文件上传完整指南-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 开发中，上传文件已经成为了一项必备功能。对于前端开发工程师来说，文件上传是一个不容忽视的技能。在使用 Express.js 构建 Web 应用时，如何实现文件上传呢？本文将为你提供详细的指南和示例代码。

前置要求

在开始本文之前，你需要了解以下技术：

Node.js：一个基于 Chrome V8 引擎的 JavaScript 运行时。
Express.js：一个基于 Node.js 平台的 Web 应用开发框架。
FormData：一个用于创建表单数据的 API，通常用于 AJAX 文件上传。

基本实现思路

在 Express.js 中实现文件上传并不复杂，具体思路如下：

通过 <input type="file"> 或 FormData API 获取要上传的文件。
将文件存储在服务器本地的某个路径中，并返回一个 URL 或唯一标识符。
将 URL 或唯一标识符存储在数据库中，以便下次使用。

对于文件上传，我们需要使用 multer 库来解析上传的文件并将其保存到服务器本地。同时，我们需要使用路由处理 POST 请求以响应上传请求。

安装和配置 multer

你可以通过 npm 安装 multer：

npm install --save multer

接下来，在代码中引入和配置 multer：

-- -------------------- ---- -------
----- ------ - ------------------

-- -----------------
----- ------- - --------------------
  ------------ ------------- ----- --- -
    -------- --------------
  --
  --------- ------------- ----- --- -
    -------- ---------- - --- - -------------------
  -
---

-- -- ------ --
----- ------ - -------- -------- ------- ---

以上代码中，我们设置了存储引擎为 diskStorage，存储路径为 ./uploads/，文件名为上传时间戳 + 原始文件名。你需要自行根据实际情况更改这些配置。

编写路由处理程序

我们需要为文件上传编写路由处理程序。以下是一个基本的处理程序：

app.post("/upload", upload.single("file"), (req, res) => {
  // req.file 是 `file` 文件的信息
  // req.body 将具有文本域数据，如果存在的话
  res.send("上传成功");
});

在上面的代码中，我们监听地址为 /upload 的 POST 请求，并通过 upload.single() 中间件处理上传的单个文件。调用 req.file 将返回一个 JSON 对象，其中包含文件的详细信息。

完整示例代码

-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------

----- --- - ----------

-- -----------------
----- ------- - --------------------
  ------------ ------------- ----- --- -
    -------- --------------
  --
  --------- ------------- ----- --- -
    -------- ---------- - --- - -------------------
  -
---

-- -- ------ --
----- ------ - -------- -------- ------- ---

-- --------
------------------- ---------------------- ----- ---- -- -
  -- -------- - ------ -----
  -- -------- ---------------
  -----------------
---

-- ----
---------------- -- -- -
  ------------------------ ----------
---

总结

本文介绍了在 Express.js 中实现文件上传的基本思路和示例代码。通过学习本文，你应该已经掌握了文件上传的基本知识，并能够在实际项目中实现文件上传的功能。同时，你也需要对 Node.js、Express.js 和 FormData API 有一定的了解。如果你想深入了解 Node.js 和 Express.js 相关内容，请阅读官方文档或其他高质量教程。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/645b268b968c7c53b0d8354c