在 web 应用中，图片上传是一项非常常见的功能。在本文中，我们将介绍如何使用 Node.js 和 Express 框架来实现图片上传功能。
1. 安装必要的依赖
在开始编写代码之前，我们需要安装一些必要的依赖。首先，我们需要安装 express 和 multer。Express 是一个流行的 Node.js web 框架，而 Multer 是一个处理 multipart/form-data 类型数据的 Node.js 中间件。
npm install express multer
2. 创建 Express 应用
接下来，我们将创建一个简单的 Express 应用，并添加一个路由来处理文件上传请求。我们可以将上传路径设置为 /upload，并使用 Multer 中间件来处理上传的文件。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------ ----- --- - ---------- ----- ------ - -------- ----- ---------- --- ------------------- ----------------------- ----- ---- -- - -------------- -------- ---------------- --- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
在上面的代码中，我们首先引入了 express 和 multer 模块，并创建了一个 Express 应用。然后，我们创建了一个名为 upload 的 Multer 实例，并将其配置为将所有上传的文件保存到 uploads/ 目录中。最后，我们添加了一个路由来处理文件上传请求，使用 upload.single() 方法来处理单个文件上传请求。
3. 创建一个 HTML 表单来测试上传功能
现在我们已经创建了 Express 应用，并添加了一个路由来处理文件上传请求。接下来，我们需要创建一个测试用的 HTML 表单来上传文件。表单中应该包含一个文件输入框和一个提交按钮。
-- -------------------- ---- -------
--------- -----
------
------
----------- ------ ---------------
-------
------
-------- ------ ------------
----- ---------------- ------------- ------------------------------
------ ----------- ------------ --
--- ----- --
------- -----------------------------
-------
-------
-------4. 运行应用并测试上传功能
现在我们已经创建了 Express 应用和测试用的 HTML 表单，可以运行应用并测试文件上传功能了。我们可以使用以下命令启动应用：
node app.js
然后在浏览器中访问 http://localhost:3000，点击 Choose File 按钮选择一个文件，然后点击 Upload 按钮上传文件。如果一切正常，应该会看到一个消息提示说文件上传成功。
5. 总结
在本文中，我们介绍了如何使用 Express 和 Multer 中间件来实现图片上传功能。我们首先安装了必要的依赖，然后创建了一个 Express 应用，并添加了一个路由来处理文件上传请求。最后，我们创建了一个 HTML 表单来测试上传功能，并运行应用进行测试。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51505