前端文件上传至本地服务器：使用 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 并配置:

   

   AI图像编辑器

   使用文本提示编辑、变换和增强照片

   46

   查看详情

   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 应用。

以上就是前端文件上传至本地服务器：使用 Express 和 Multer的详细内容，更多请关注php中文网其它相关文章！