如何向Express服务器的JSON API请求中发送图片？

一、优先优化存储方案 #

直接把图片存在MySQL的BLOB字段里不是理想选择，会拖慢数据库查询速度，还会让数据库体积快速膨胀。更合理的做法是：

• 把图片文件存在服务器本地目录或者云存储服务里
• 数据库的company_logo字段改成Sequelize.STRING，只存图片的访问路径或者URL

这种方式不仅性能更好，后续Flutter端直接加载图片也更方便。

二、如果一定要用BLOB存储二进制数据 #

1. 后端配置文件上传中间件 #

Express本身没法直接处理文件上传，需要用multer中间件来解析请求里的图片二进制数据：

const multer = require('multer');
// 把文件临时存在内存中，方便转成BLOB存入数据库
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// 修改接口路由，用multer解析单文件上传
app.post('/company/create', upload.single('company_logo'), async (req, res) => {
  try {
    const { company_name } = req.body;
    // req.file.buffer就是图片的二进制数据，直接存入BLOB字段
    const newCompany = await Company.create({
      company_name,
      company_logo: req.file.buffer
    });
    res.status(201).json(newCompany);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

2. 测试API的两种方式 #

Postman测试：

• 请求方法选POST，输入你的接口URL
• 切换到Body标签，选择form-data格式
• 添加两个字段：
  • 键名company_name，类型选Text，值填Example Company
  • 键名company_logo，类型选File，然后选择本地的图片文件上传

curl命令测试：

curl -X POST -F "company_name=Example Company" -F "company_logo=@/你的本地图片路径/xxx.png" http://你的服务器地址/company/create

三、用Base64编码传递（适合小尺寸图片） #

如果不想用文件上传，也可以把图片转成Base64字符串，直接放在JSON请求体里：

1. 后端处理逻辑 #

不需要multer，直接接收Base64字符串转成Buffer存入BLOB：

app.post('/company/create', async (req, res) => {
  try {
    const { company_name, company_logo } = req.body;
    // 拆分Base64前缀，只取编码部分转成Buffer
    const logoBuffer = Buffer.from(company_logo.split(',')[1], 'base64');
    const newCompany = await Company.create({
      company_name,
      company_logo: logoBuffer
    });
    res.status(201).json(newCompany);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

2. 测试方法 #

• 先把本地图片转成Base64字符串（可以用在线工具或者写个小脚本转）
• 构造JSON请求体：

{
  "company_name": "Example Company",
  "company_logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
}

• Postman里选Body为raw-JSON，粘贴上面的内容发送；或者用curl：

curl -X POST -H "Content-Type: application/json" -d '{"company_name":"Example Company","company_logo":"data:image/png;base64,xxx..."}' http://你的服务器地址/company/create

四、Flutter端适配提示 #

• 用文件上传方案的话：用http包的MultipartRequest构建表单数据，上传图片文件
• 用Base64方案的话：把Flutter中获取到的图片文件转成Base64字符串，放进JSON请求体里

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