前端文件上传至本地服务器：使用 Express 和 Multer

本文档旨在指导开发者如何使用 express 框架和 Multer 中间件，实现前端文件上传并保存到本地服务器的功能。我们将详细介绍前端 html 表单的配置，以及后端 Express 路由的处理，包括 Multer 的配置和使用，以及文件保存的实现。通过本教程，你将能够轻松地构建一个支持文件上传的 Web 应用。

前端 HTML 表单配置

首先，我们需要创建一个 HTML 表单，允许用户选择文件并上传。关键在于设置 enctype 属性为 multipart/form-data，这告诉浏览器使用 MIME 协议对表单数据进行编码，以便正确地上传文件。

<form action="/products" method="POST" enctype="multipart/form-data">   <input type="file" name="image" id="image">   <button class="submit">Submit</button> </form>

• action: 指定表单数据提交的 URL。
• method: 设置为 POST，因为我们需要上传文件。
• enctype=”multipart/form-data”: 确保浏览器以正确的方式编码表单数据，以便上传文件。
• <input type=”file” name=”image” id=”image”>: 文件选择输入框，name 属性设置为 image，这个名称将在后端用于访问上传的文件。

后端 Express 配置和 Multer 中间件

在后端，我们需要使用 Express 框架处理上传请求。Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它专门用于处理文件上传。

1. 安装 Multer:

   立即学习“前端免费学习笔记（深入）”；

   npm install multer --save

2. 引入 Multer 并配置:

   

   Jasper

   Jasper是最高质量的AI文案工具

   157

   查看详情

   const express = require('express'); const multer  = require('multer'); const app = express();  // 配置 Multer 存储 const storage = multer.diskStorage({   destination: function (req, file, cb) {     cb(null, './uploads/') // 指定文件存储目录   },   filename: function (req, file, cb) {     cb(null, file.originalname) // 使用原始文件名     // 或者使用 Date.now() + '-' + file.originalname 生成唯一文件名   } })  const upload = multer({ storage: storage });
   • multer.diskStorage(): 配置文件的存储方式。
     • destination: 指定文件存储的目录。
     • filename: 指定保存的文件名。可以使用原始文件名，也可以生成唯一的文件名。
   • multer({ storage: storage }): 创建 Multer 实例，并传入配置。

3. 处理上传请求:

   app.post('/products', upload.single('image'), (req, res) => {   // req.file 是 `image` 文件   // req.body 将具有文本域数据，如果存在的话   console.log(req.file); // 上传文件信息   console.log(req.body); // 其他表单数据    res.send('File uploaded successfully!'); });
   • upload.single(‘image’): 中间件，用于处理单个文件的上传，image 是前端 HTML 表单中 input 标签的 name 属性。
   • req.file: 包含上传文件的信息，例如文件名、文件大小、文件类型等。
   • req.body: 包含表单中的其他文本数据。

完整示例代码

const express = require('express'); const multer  = require('multer'); const app = express();  // 配置 Multer 存储 const storage = multer.diskStorage({   destination: function (req, file, cb) {     cb(null, './uploads/') // 指定文件存储目录   },   filename: function (req, file, cb) {     cb(null, file.originalname) // 使用原始文件名     // 或者使用 Date.now() + '-' + file.originalname 生成唯一文件名   } })  const upload = multer({ storage: storage });  app.use(express.static('public')); // 静态文件服务，用于访问上传的文件  app.post('/products', upload.single('image'), (req, res) => {   console.log(req.file);   console.log(req.body);   res.send('File uploaded successfully!'); });  app.listen(3000, () => {   console.log('Server is running on port 3000'); });

注意事项:

• 确保 uploads 目录存在，或者在代码中创建该目录。
• Multer 还有其他配置选项，例如限制文件大小、文件类型等，可以根据实际需求进行配置。
• 错误处理：在实际应用中，需要添加错误处理机制，例如处理文件上传失败的情况。

总结:

通过本教程，你学习了如何使用 Express 和 Multer 实现前端文件上传并保存到本地服务器。 关键在于正确配置 HTML 表单的 enctype 属性，以及使用 Multer 中间件处理上传请求。 掌握这些知识后，你可以轻松地构建支持文件上传的 Web 应用。

以上就是html js 前端 node.js node 浏览器 app 路由 中间件 html express JS input