如何将Base64格式图片上传至Node.js(Express)服务器并被识别为文件

嘿，我之前也碰到过一模一样的情况——直接把Base64字符串塞进FormData里，multer确实会把它当成普通文本丢进req.body，根本不会识别成文件。下面给你两种靠谱的解决思路，选适合你的就行：

方法1：前端将Base64转成Blob后上传（推荐） #

这种方法是把Base64字符串转换成标准的Blob对象，再放到FormData里，这样multer就能像处理普通文件上传一样识别它了，完全符合常规的文件上传流程。

前端代码修改： #

// 先写个工具函数，把dataURL转成Blob
function dataURLtoBlob(dataURL) {
  const arr = dataURL.split(',');
  // 提取图片的MIME类型（比如image/jpeg）
  const mime = arr[0].match(/:(.*?);/)[1];
  // 解码Base64字符串
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  
  while(n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  
  return new Blob([u8arr], { type: mime });
}

// 修改你的上传逻辑
const formData = new FormData();
const imageBlob = dataURLtoBlob(myImage);
// 第三个参数是文件名（可选，但推荐加上，方便后端识别文件类型）
formData.append("filedata", imageBlob, `uploaded_${Date.now()}.jpg`); 

fetch("/extension/api/uploadtofb", { 
  method: "POST", 
  body: formData 
});

后端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, `image_${Date.now()}_${file.originalname}`);
  }
});

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

// 处理上传请求
app.post('/extension/api/uploadtofb', upload.single('filedata'), (req, res) => {
  // 现在req.file里就是上传的图片文件啦
  console.log('文件信息:', req.file);
  
  // 这里可以做你需要的处理，比如读取文件内容、转存到云存储等
  res.status(200).json({ 
    message: '上传成功',
    file: req.file
  });
});

方法2：后端直接解析Base64字符串（无需multer） #

如果前端代码不方便修改，那直接在后端解析req.body里的Base64字符串就行，完全不用依赖multer。

后端代码示例： #

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

// 记得先解析请求体，因为Base64字符串在req.body里
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.post('/extension/api/uploadtofb', (req, res) => {
  try {
    const { filedata } = req.body;
    
    if (!filedata) {
      return res.status(400).json({ error: '未获取到图片数据' });
    }
    
    // 拆分Base64字符串，提取MIME类型和实际数据
    const arr = filedata.split(',');
    const mimeMatch = arr[0].match(/:(.*?);/);
    if (!mimeMatch) {
      return res.status(400).json({ error: '图片格式无效' });
    }
    
    const mime = mimeMatch[1];
    const base64Data = arr[1];
    
    // 把Base64转成Buffer，方便后续处理
    const imageBuffer = Buffer.from(base64Data, 'base64');
    
    // 示例：保存到本地文件
    const fileExt = mime.split('/')[1]; // 比如从image/jpeg拿到jpeg
    const filename = `image_${Date.now()}.${fileExt}`;
    const savePath = path.join(__dirname, './uploads/', filename);
    
    // 确保uploads目录存在
    if (!fs.existsSync(path.join(__dirname, './uploads/'))) {
      fs.mkdirSync(path.join(__dirname, './uploads/'), { recursive: true });
    }
    
    fs.writeFileSync(savePath, imageBuffer);
    
    res.status(200).json({
      message: '上传成功',
      filename: filename,
      savePath: savePath
    });
  } catch (err) {
    console.error('处理图片出错:', err);
    res.status(500).json({ 
      error: '图片上传失败',
      details: err.message
    });
  }
});

小提示： #

• 方法1更推荐，因为它遵循标准的文件上传协议，后续如果要加多文件上传、上传进度条等功能会更方便。
• 不管用哪种方法，都要记得做好错误处理，比如验证图片格式、检查文件大小，避免恶意请求。

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