如何使用Express与fs实现前端文件上传并保存到本地文件夹

• 前端表单默认使用application/x-www-form-urlencoded编码提交，仅会传递文件名字符串，不会携带文件实际二进制内容
• Express 内置的请求体解析中间件仅支持解析urlencoded、json格式的请求体，无法处理文件上传必须的multipart/form-data格式请求，自然拿不到真实文件数据

1. 修改前端EJS表单配置 #

给form标签添加enctype="multipart/form-data"属性，告诉浏览器以二进制格式打包上传文件内容：

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

2. 安装multipart格式解析依赖 #

Express本身不解析multipart请求，需要安装multer处理文件上传请求，拿到文件二进制内容后即可通过fs模块写入本地：

npm install multer

3. 修改后端逻辑 #

配置multer解析上传文件，拿到文件二进制buffer后用fs写入指定目录，注意要等文件写入完成再返回响应：

const express = require('express');
const fs = require('fs');
const path = require('path');
const multer = require('multer');
const app = express();

// 原有视图引擎等配置保留即可
app.set('view engine', 'ejs');

// 配置multer使用内存存储，直接获取文件二进制buffer
const upload = multer({ storage: multer.memoryStorage() });

// 提前创建文件存储目录，避免写入时报路径不存在错误
const UPLOAD_PATH = path.join(__dirname, 'uploads');
if (!fs.existsSync(UPLOAD_PATH)) {
  fs.mkdirSync(UPLOAD_PATH, { recursive: true });
}

// 配置静态资源访问，后续可以直接通过url访问上传的图片
app.use('/uploads', express.static(UPLOAD_PATH));

// 路由添加upload.single中间件，对应前端name为image的文件字段
app.post('/products', upload.single('image'), (req, res) => {
  // 兜底判断是否上传了文件
  if (!req.file) {
    return res.status(400).send('未检测到上传的图片文件');
  }

  // 生成文件名，加时间戳避免重名覆盖
  const saveFileName = `${Date.now()}-${req.file.originalname}`;
  const fullSavePath = path.join(UPLOAD_PATH, saveFileName);

  // 写入文件
  fs.writeFile(fullSavePath, req.file.buffer, (err) => {
    if (err) {
      console.error('文件写入失败：', err);
      return res.status(500).send('文件保存失败');
    }
    // 写入完成后再返回响应
    res.render('products', { 
      title: 'bib',
      imgUrl: `/uploads/${saveFileName}`
    });
  });
});

app.listen(3000, () => {
  console.log('服务运行在3000端口');
});

• 生产环境不要直接使用用户上传的原始文件名存储，容易出现重名覆盖、路径遍历等安全问题，建议使用随机字符串+文件后缀的方式生成唯一文件名
• 如果需要上传大体积文件，不要使用内存存储，改为multer磁盘存储生成临时文件，再通过fs.rename移动到目标目录即可，避免内存占用过高
• 可以根据需求添加文件类型、大小校验，比如仅允许上传png/jpg格式、大小不超过2M的图片，避免非法文件上传

内容的提问来源于stack exchange，提问作者Baraa Baba