如何将Webcam-easy.js生成的快照上传至Node.js服务器

前端部分（Webcam拍摄+上传逻辑） #

webcam.snap()返回的是base64编码的图片Data URL，无法直接作为文件上传，需要先转换为File/Blob对象，再通过FormData封装后发送POST请求。

• 第一步：编写base64转File的工具函数，转换拍摄得到的图片

// 执行拍摄，拿到base64格式的图片数据
let picture = webcam.snap();

/**
 * 将base64 Data URL转换为可上传的File对象
 * @param {string} dataurl - base64图片地址
 * @param {string} filename - 自定义上传文件名
 * @returns {File}
 */
function dataURLtoFile(dataurl, filename) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
}

// 转换拍摄的图片为jpg格式文件，文件名用时间戳避免重名
const captureFile = dataURLtoFile(picture, `webcam_capture_${Date.now()}.jpg`);

• 第二步：构造表单数据，发送上传请求

// 初始化FormData实例
const formData = new FormData();
// 按要求将文件挂载到file字段
formData.append('file', captureFile);

// 发送POST请求到目标上传路径
fetch('/upload/', {
  method: 'POST',
  body: formData
})
.then(res => res.json())
.then(res => {
  console.log('上传结果：', res);
})
.catch(err => {
  console.error('上传出错：', err);
});

注意：不要手动给请求设置Content-Type: multipart/form-data请求头，浏览器会自动生成带正确boundary分隔符的请求头，手动设置会导致后端解析文件失败。

后端部分（Node.js接收+存储逻辑） #

使用Express作为服务框架，multer作为multipart格式文件的解析中间件，即可实现文件接收和本地存储。

• 第一步：安装所需依赖

npm install express multer

• 第二步：编写服务端逻辑

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

// 配置文件存储规则
const storage = multer.diskStorage({
  // 指定文件存储到项目根目录下的uploads文件夹
  destination: (req, file, cb) => {
    cb(null, path.join(__dirname, 'uploads'));
  },
  // 保留上传时的文件名，也可根据需求自定义命名规则
  filename: (req, file, cb) => {
    cb(null, file.originalname);
  }
});

// 初始化上传中间件，可按需配置文件大小、格式限制
const upload = multer({
  storage,
  limits: { fileSize: 5 * 1024 * 1024 } // 示例：限制单文件最大5MB
});

// 定义/upload/的POST接口，接收字段名为file的单文件
app.post('/upload/', upload.single('file'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ code: 400, msg: '未接收到有效文件' });
  }
  // 上传成功返回文件信息
  res.json({
    code: 200,
    msg: '文件上传成功',
    data: {
      filename: req.file.filename,
      storagePath: path.join(__dirname, 'uploads', req.file.filename)
    }
  });
});

// 启动服务，端口可自行修改
app.listen(3000, () => {
  console.log('服务已启动，监听端口3000');
});

• 配置注意事项：
  • 启动服务前需要在项目根目录手动创建uploads文件夹，否则会抛出路径不存在的错误
  • 如果前后端服务端口不一致存在跨域，安装cors依赖后添加app.use(require('cors')())全局中间件即可解决
  • 如需限制仅允许上传图片格式，可在multer配置中添加fileFilter规则做格式校验

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