使用Axios向本地服务器上传图片的正确语法及404报错排查

看起来你遇到的问题主要是React Native里FormData的处理逻辑和Postman不一样，再加上模拟器对localhost的解析差异，我帮你梳理下修改点和解决方案：

核心问题分析 #

1. FormData格式错误：你传入的imageData是文件路径字符串，但React Native的FormData需要特定结构的文件对象才能被服务器正确识别，单纯的路径无法被解析成有效文件。
2. localhost解析问题：在iOS/Android模拟器中，localhost指向的是模拟器自身，而你的服务器运行在电脑上，直接用localhost会导致请求找不到目标服务器。
3. Content-Type设置错误：手动设置multipart/form-data会丢失自动生成的边界标识（boundary），服务器没法正确拆分表单数据，这也是Postman能成功但代码不行的关键原因之一。

修改后的代码 #

import axios from "axios";

export const uploadReceipt = async (expenseId, imageData) => {
  // 从文件路径中提取文件名
  const fileName = imageData.split('/').pop();
  // 根据你的图片类型调整MIME类型，比如png就改成image/png
  const fileType = 'image/jpeg';

  const formData = new FormData();
  // React Native中FormData需要传入包含uri、name、type的对象
  formData.append("receipt", {
    uri: imageData,
    name: fileName,
    type: fileType
  });

  try {
    // 把localhost替换成你的电脑局域网IP（用ifconfig/ipconfig可查看）
    const response = await axios.post(
      `http://192.168.1.100:3000/expenses/${expenseId}/receipts`,
      formData
      // 不要手动设置Content-Type，Axios会自动生成带boundary的正确请求头
    );
    return response.data;
  } catch (error) {
    console.error('上传失败详情:', error.response?.data || error.message);
    throw error;
  }
};

关键修改说明 #

• FormData对象格式：React Native的FormData要求文件参数是一个包含uri（文件路径）、name（文件名）、type（MIME类型）的对象，这样服务器才能识别并解析文件内容。
• 替换localhost为局域网IP：通过ifconfig（Mac/Linux）或ipconfig（Windows）查看你的电脑局域网IP，替换掉代码中的localhost，模拟器才能访问到电脑上的本地服务器。
• 移除手动Content-Type设置：Axios会自动为multipart/form-data请求生成包含边界标识的Content-Type头，手动设置会破坏这个逻辑，导致服务器无法解析请求。

额外注意事项 #

• 确保你的App已经获取了存储访问权限：Android需要在AndroidManifest.xml中添加READ_EXTERNAL_STORAGE（Android 12及以下）或READ_MEDIA_IMAGES（Android 13+）权限；iOS需要在Info.plist中添加NSPhotoLibraryUsageDescription权限描述。
• 确认服务器端的路由/expenses/:expenseId/receipts确实支持POST方法，并且能正确处理multipart/form-data类型的请求。

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