本文档旨在指导开发者如何使用 Express 框架和 Multer 中间件，实现前端文件上传并保存到本地服务器的功能。我们将详细介绍前端 HTML 表单的配置，以及后端 Express 路由的处理，包括 Multer 的配置和使用，以及文件保存的实现。通过本教程，你将能够轻松地构建一个支持文件上传的 Web 应用。
前端 HTML 表单配置
首先，我们需要创建一个 HTML 表单，允许用户选择文件并上传。关键在于设置 enctype 属性为 multipart/form-data，这告诉浏览器使用 MIME 协议对表单数据进行编码，以便正确地上传文件。
action: 指定表单数据提交的 URL。method: 设置为 POST，因为我们需要上传文件。enctype=”multipart/form-data”: 确保浏览器以正确的方式编码表单数据，以便上传文件。: 文件选择输入框，name 属性设置为 image，这个名称将在后端用于访问上传的文件。
后端 Express 配置和 Multer 中间件
在后端，我们需要使用 Express 框架处理上传请求。Multer 是一个 Node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它专门用于处理文件上传。
安装 Multer:
立即学习“前端免费学习笔记（深入）”；
npm install multer --save
引入 Multer 并配置:
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 实例，并传入配置。
处理上传请求:
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的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1574845.html
微信扫一扫 
支付宝扫一扫 
