如何从React应用向Node.js服务器发送PNG/JPEG二进制格式图片

核心报错根因 #

二进制传输失败基本都出在以下几个环节：

• 前端手动给axios设置固定的Content-Type: multipart/form-data，丢失multipart格式必需的boundary边界参数，导致服务端无法正确解析文件
• 前端提前把File对象转成base64再传输，破坏了原始二进制结构
• Node端全局挂载的express.json()/express.urlencoded()中间件提前拦截文件上传请求，把原始二进制流解析成乱码字符串，后续拿不到正确的文件Buffer
• 转发Twilio请求时用JSON/FormData格式包裹文件，没有直接传递原始二进制内容，不符合Twilio接口要求

分模块正确实现代码 #

所有原有组件、函数、路由命名保持不变。

1. React端InsertMMS文件上传组件 #

// InsertMMS组件核心逻辑
const InsertMMS = () => {
  const handleFileUpload = async (e) => {
    const selectedFile = e.target.files[0];
    const allowedTypes = ['image/gif', 'image/png', 'image/jpeg'];
    if (!allowedTypes.includes(selectedFile.type)) {
      alert('仅支持GIF/PNG/JPEG格式文件');
      return;
    }
    // 直接封装FormData，禁止做base64转码
    const formData = new FormData();
    formData.append('mmsFile', selectedFile);
    dispatch(attachMMS(formData));
  };

  return <input type="file" accept=".gif,.png,.jpeg" onChange={handleFileUpload} />
};

2. Redux中attachMMS动作函数（axios请求） #

// Redux attachMMS动作
export const attachMMS = (formData) => async (dispatch) => {
  try {
    const res = await axios.post('/api/mms', formData);
    // *注意：绝对不要手动在headers里写Content-Type: multipart/form-data
    // 浏览器会自动生成带随机boundary参数的合法请求头，手动写会导致边界丢失，解析失败
    dispatch({ type: 'ATTACH_MMS_SUCCESS', payload: res.data });
  } catch (err) {
    dispatch({ type: 'ATTACH_MMS_FAIL', payload: err.response.data });
  }
};

3. Node端/mms接口路由配置 #

使用multer中间件处理multipart格式上传，用内存存储直接读取原始文件Buffer，无需落盘：

// Node端路由配置
const express = require('express');
const multer = require('multer');
const router = express.Router();
const { createMediaMMSResource } = require('./mmsController');

// 内存存储，直接拿到原始二进制Buffer
const upload = multer({ storage: multer.memoryStorage() });

// 注意：该路由不要被全局的express.json()/express.urlencoded()提前拦截
// 中间件对应前端FormData append的字段名mmsFile
router.post('/mms', upload.single('mmsFile'), createMediaMMSResource);

module.exports = router;

4. Node端createMediaMMSResource处理函数（转发Twilio） #

// createMediaMMSResource处理函数
const axios = require('axios');
const TWILIO_MEDIA_UPLOAD_URL = '替换为实际Twilio媒体上传接口地址';
const TWILIO_AUTH = { 
  username: '替换为实际Twilio Account SID', 
  password: '替换为实际Twilio Auth Token' 
};

const createMediaMMSResource = async (req, res) => {
  try {
    // req.file.buffer 就是未经过任何转码的原始文件二进制Buffer
    const fileBuffer = req.file.buffer;
    const fileMimeType = req.file.mimetype;

    // 直接将原始二进制Buffer作为请求体发送，符合Twilio接口要求
    const twilioRes = await axios.post(TWILIO_MEDIA_UPLOAD_URL, fileBuffer, {
      headers: {
        'Content-Type': fileMimeType, // 匹配上传文件的实际mime类型，不要传application/json
      },
      auth: TWILIO_AUTH,
    });

    res.status(200).json({ mediaSid: twilioRes.data.sid });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
};

module.exports = { createMediaMMSResource };

校验排查点 #

• 前端上传后在浏览器DevTools Network面板检查请求载荷，确认是二进制FormData格式，无base64编码字符串
• Node端打印req.file.buffer，确认是Buffer类型，长度和原文件大小一致
• 发给Twilio的请求头Content-Type与上传文件的mime类型完全匹配，请求体为纯二进制，无JSON结构包裹
• 确认/api/mms路由没有被express.json()、express.text()这类会修改原始请求体的中间件提前处理

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