本文将详细介绍如何使用前端

  
  Submit

注意: name 属性的值 (image 在本例中) 在后端用于识别上传的文件。

后端：使用 Multer 处理文件上传

Express 默认的 body-parser 中间件不处理 multipart/form-data 类型的请求。 因此，我们需要使用专门为此目的设计的中间件，例如 Multer。

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

1. 安装 Multer:

   npm install multer

2. 导入并配置 Multer:

   

   ERMEB云盘发卡系统源码

   ERMEB云盘发卡系统官方正版系统，发卡系统操作简单、方便、易懂。 系统微信小程序前端采用nuiapp后端采用think PHP6PC前端采用vue开发 使用场景：文件上传储存，适合个人/个体/中小企业使用。本系统配合微信小程序端进行使用，文件下载以及发卡商品卡密领取都需要进入小程序内获取下载码以及卡密领取，小程序内可设置积分充值以及任务获取积分，支持微信激励广告领取文件下载码以及卡密商品，可实现

   下载

   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) // 使用原始文件名
     }
   })
   
   const upload = multer({ storage: storage });

   multer.diskStorage() 允许您完全控制磁盘上文件的存储。 destination 选项确定文件应存储在哪个文件夹中。 如果未提供 destination，则操作系统将使用默认的临时目录。 filename 用于确定文件夹中的文件名。 如果未提供 filename，则 Multer 将生成一个不带扩展名的随机文件名。

3. 在路由中使用 Multer 中间件:

   app.post('/products', upload.single('image'), (req, res) => {
     console.log(req.file); // 上传的文件信息
     console.log(req.body); // 其他表单数据
   
     // 文件已保存到 ./uploads/ 目录，可以使用 fs 模块进一步处理
     res.render('products', { title: 'bib' });
   });

   upload.single('image') 是一个中间件，它只处理一个名为 image 的文件字段。 上传的文件信息存储在 req.file 对象中。 如果有多个文件字段，可以使用 upload.array('images', maxCount) 或 upload.fields([{ name: 'image1', maxCount: 1 }, { name: 'image2', maxCount: 3 }])。

完整示例

app.js:

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) // 使用原始文件名
  }
})

const upload = multer({ storage: storage });

app.set('view engine', 'ejs'); // 设置 ejs 模板引擎

app.post('/products', upload.single('image'), (req, res) => {
  console.log(req.file); // 上传的文件信息
  console.log(req.body); // 其他表单数据

  // 文件已保存到 ./uploads/ 目录，可以使用 fs 模块进一步处理
  res.render('products', { title: 'bib' });
});

app.get('/products', (req, res) => {
    res.render('products', { title: 'bib' })
})

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

products.ejs:

  


  
Upload Image
  

    
    Submit
  

注意事项

• 确保 ./uploads/ 目录存在，或者在代码中创建它。
• 可以根据需要自定义 Multer 的配置，例如限制文件大小、文件类型等。
• 上传的文件存储在服务器上，需要考虑安全性问题，例如防止恶意文件上传。
• 在生产环境中，建议使用云存储服务（如 AWS S3、阿里云 OSS）来存储上传的文件。

总结

本文详细介绍了如何使用前端表单、Express 框架和 Multer 中间件实现文件上传功能。 通过正确配置表单和使用合适的 body 解析中间件，可以轻松地将文件从前端上传到后端，并将其保存到本地文件夹中。 记住要考虑安全性问题，并根据需要自定义 Multer 的配置。