React Native Android端表单图片无法上传至后端问题求助

看起来你遇到的核心问题是React Native中FormData的文件构造方式不符合Multer的解析要求，同时手动设置请求头导致了表单解析失败。下面是针对性的解决方案：

一、问题根源分析 #

1. Base64格式不是Multer期望的文件格式：Multer专门用于解析multipart/form-data中的二进制文件流，而你将图片转为Base64字符串后放入FormData，Multer会把它当成普通文本字段，而非文件。
2. 手动设置Content-Type破坏了表单边界：当你手动指定multipart/form-data; boundary=someRandomString时，Axios自动生成的请求边界和你设置的不一致，后端无法正确解析表单结构，甚至直接抛出网络错误。

二、分步解决方案 #

1. 修改图片选择逻辑，使用本地文件URI而非Base64 #

放弃includeBase64配置，直接使用ImagePicker返回的本地文件路径，这是React Native FormData识别文件的正确方式：

import { Platform } from 'react-native'; // 新增Platform判断
import ImagePicker from 'react-native-image-crop-picker';
const [images, setImages] = useState([]);

const takePhotoFromCamera = () => {
  ImagePicker.openCamera({
    compressImageMaxWidth: 300,
    compressImageMaxHeight: 300,
    cropping: true,
    compressImageQuality: 0.8,
    // 移除includeBase64，获取本地文件路径
  }).then(image => {
    // 生成带时间戳的文件名，避免重复
    const fileName = `photo_${Date.now()}.${image.mime.split('/')[1]}`;
    setImages(prev => [...prev, { 
      uri: image.path, 
      name: fileName, 
      type: image.mime 
    }]);
  }).catch(error => console.log(error));
}

const choosePhotoFromLibrary = () => {
  ImagePicker.openPicker({
    width: 300,
    height: 300,
    cropping: true,
    compressImageQuality: 0.8,
    // 移除includeBase64
  }).then(image => {
    const fileName = `gallery_${Date.now()}.${image.mime.split('/')[1]}`;
    setImages(prev => [...prev, { 
      uri: image.path, 
      name: fileName, 
      type: image.mime 
    }]);
  }).catch(error => console.log(error));
}

2. 修正FormData上传逻辑，让Axios自动处理请求头 #

移除手动设置的Content-Type，让Axios根据FormData自动生成正确的multipart/form-data请求头和边界：

async function sendImageToServer() {
  setLoading(true);
  try {
    if (images.length === 0) {
      console.log("请先选择图片");
      setLoading(false);
      return;
    }

    const formData = new FormData();
    // 适配iOS/Android的URI格式：iOS需要去掉file://前缀
    const fileUri = Platform.OS === 'android' ? images[0].uri : images[0].uri.replace('file://', '');
    formData.append("file", { 
      name: images[0].name, 
      type: images[0].type, 
      uri: fileUri 
    });
    formData.append(
      "questionData",
      JSON.stringify({ 
        questionTitle: questionTitle, 
        questionContent: postText, 
        questionObjective: selectedObj 
      })
    );

    const results = await axios.post(
      `http://${myIP}:5000/question/create`,
      formData,
      {
        headers: {
          "authorization": "Bearer jljlkjl",
          // 只保留Accept头，Content-Type交给Axios自动处理
          "Accept": "application/json"
        }
      }
    );
    console.log("上传成功：", results);
  } catch(error) {
    console.error("上传失败：", error);
    // 打印详细错误信息便于排查
    if (error.response) {
      console.log("后端响应数据：", error.response.data);
      console.log("响应状态码：", error.response.status);
    }
  } finally {
    setLoading(false);
  }
}

3. 后端验证（可选） #

如果还是存在问题，可以在后端临时添加日志，确认表单数据是否正确接收：

// 在upload.array中间件之前添加临时日志
router.post("/question/create", verifyFn.verifyToken, (req, res, next) => {
  console.log("接收的表单字段：", req.body);
  next();
}, upload.array("file", 5), validationFn.validateCreateForumQuestion, questionController.createForumQuestion);

三、额外注意事项 #

• 确保手机和后端服务器在同一局域网内，且服务器IP和端口可正常访问。
• 若Android端仍无法上传，检查是否开启了文件读写权限（在AndroidManifest.xml中添加READ_EXTERNAL_STORAGE和WRITE_EXTERNAL_STORAGE权限）。
• 多图上传时，只需循环调用formData.append("file", {...})即可，Multer的upload.array("file",5)会自动识别多个同名字段的文件。

内容的提问来源于stack exchange，提问作者Gareth T.