使用FormData向Node.js服务器传图片时Payload为空求助

核心问题拆解 #

你的代码存在两处关键错误，导致FormData无法被正确传递：

1. API请求层错误：手动指定multipart/form-data请求头，且将传入的FormData重新包装成普通对象发送
2. 前端FormData构造错误：直接将图片数组整体append到FormData，未逐个添加文件流

1. 修复API请求代码 #

• 移除手动设置的Content-Type: multipart/form-data：axios会自动为FormData生成包含boundary的正确请求头，手动设置会丢失边界标识，导致服务器无法解析
• 直接传递FormData作为请求body，不要重新包装成普通对象

修改后的API代码：

/// POST SEND MESSAGE  ///

export const postSendMessage = async (id, data) => {
  const headers = {
    'Accept-Language': currentLang,
    // 移除手动设置的Content-Type，axios自动处理
  }
  try {
    // 直接传入FormData作为body，无需重新包装
    const response = await axios.post(`http://localhost:3001/patient/${id}/message`, data, { headers })
    return response
  }
  catch (error) {
    console.error('error', error);
  }
  return null
};

2. 修复前端FormData构造逻辑 #

图片是数组类型，需要逐个append到FormData中，直接传递数组会导致服务器接收到的是对象而非文件流：

修改后的前端发送逻辑：

const handleSendMessage = async (event) => {
  if (event.key === 'Enter') {
    try {
      const formData = new FormData();
      formData.append('text', message);
      // 循环添加每个图片文件
      images.forEach(image => {
        formData.append('images', image);
      });
      formData.append('senderId', userContext.user.id);
      const messageSent = await API.postSendMessage(conversationId, formData);

      setMessage('');
      setImages([]);
    } catch (error) {
      console.error(error);
    }
  }
};

额外验证提示 #

• 可以在浏览器开发者工具的Network面板中查看请求Payload，确认文本和文件是否被正确包含
• 服务器端需确保使用了正确的multipart解析中间件（比如Express的multer），否则无法接收文件

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