React Native本地头像上传iOS端Content-Type缺失问题求助

问题原因 #

iOS端处理通过require()引入的本地打包资源时，不会自动为multipart/form-data请求中的文件字段填充正确的Content-Type；而Android端会自动识别资源类型并补全该字段，两端行为不一致导致后端因Content-Type为空抛出500异常。

解决方案 #

1. 手动指定文件的Content-Type与文件名 #

构建FormData时，明确为本地资源指定mime类型和文件名，确保iOS端请求携带正确字段：

import { Platform } from 'react-native';

async function uploadLocalAvatar() {
  const localAvatar = require('../../images/1.png');
  const formData = new FormData();
  
  // 根据图片类型手动设置mime（png用image/png，jpg用image/jpeg）
  const mimeType = 'image/png';
  const fileConfig = {
    // iOS下需移除file://前缀
    uri: Platform.OS === 'ios' ? localAvatar.uri.replace('file://', '') : localAvatar.uri,
    type: mimeType,
    name: 'avatar.png'
  };

  formData.append('avatar', fileConfig);

  try {
    const res = await fetch('你的上传接口地址', {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
        // 其他必要请求头如token等
      },
      body: formData
    });
    const data = await res.json();
    console.log('上传成功:', data);
  } catch (err) {
    console.error('上传失败:', err);
  }
}

2. 动态获取文件MIME类型（适配多类型图片） #

如果需要支持多种图片格式，可借助react-native-fs库动态获取本地文件的mime类型，避免硬编码：

import RNFS from 'react-native-fs';
import { Platform } from 'react-native';

async function uploadLocalAvatar() {
  const localAvatar = require('../../images/1.png');
  const filePath = Platform.OS === 'ios' ? localAvatar.uri.replace('file://', '') : localAvatar.uri;
  
  // 获取文件真实mime类型
  const mimeType = await RNFS.getMimeType(filePath);
  const ext = mimeType.split('/')[1];

  const formData = new FormData();
  formData.append('avatar', {
    uri: filePath,
    type: mimeType,
    name: `avatar.${ext}`
  });

  // 后续请求逻辑同前
}

注意：使用前需先安装react-native-fs并完成原生端配置。

3. 确保FormData结构完整性 #

iOS端对FormData中的文件对象结构要求严格，必须同时提供uri、type、name三个字段，缺少任意一个都可能导致Content-Type字段丢失。

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