React Native构建FormData报错，无法向Flask后端上传图片

问题说明 #

使用React Native + Flask开发应用时，上传图片构建FormData时出现TypeScript类型错误：

Argument of type '{ uri: any; type: string; name: string; }' is not assignable to parameter of type 'string | Blob'.   Object literal may only specify known properties, and 'uri' does not exist in type 'Blob'.

前端请求无法被Flask后端正确解析，但Postman测试接口功能正常。

错误原因 #

1. TypeScript类型定义限制：标准FormData.append仅接受string或Blob类型参数，但React Native对FormData做了扩展，支持传入包含uri、type、name的对象处理本地文件，TypeScript的类型定义未同步该扩展，导致类型校验报错。
2. 手动设置Content-Type导致解析失败：手动添加'Content-Type': 'multipart/form-data'会丢失自动生成的boundary分隔符，后端无法正确拆分FormData内容。

解决方案 #

1. 类型断言绕过TypeScript校验 #

在formData.append时，将图片对象断言为any类型，跳过类型检查。

2. 移除手动设置的Content-Type #

让fetch自动生成包含boundary的Content-Type请求头，确保后端能正确解析。

3. 优化图片信息获取（可选） #

直接使用ImagePicker返回的图片类型，避免硬写image/jpeg，适配不同图片格式。

修改后的前端代码 #

const ImagePickerScreen = () => {
  const [image, setImage] = useState<null | string>(null);
  const [imageType, setImageType] = useState<string>('image/jpeg');

  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
      // 直接使用ImagePicker返回的图片类型
      setImageType(result.assets[0].type);
    }
  };

  const handleIsHotdog = async () => {
    if (!image) {
      alert("No image selected");
      return;
    }
    try {
      const formData = new FormData();
      // 类型断言跳过TypeScript校验
      formData.append('image', {
        uri: image,
        type: imageType,
        name: `selectedImage.${imageType.split('/')[1]}`
      } as any);

      const response = await fetch('http://你的接口地址', {
        method: 'POST',
        body: formData,
        // 移除手动设置的Content-Type，保留其他需要的请求头（如Authorization）
        headers: {},
      });
      const responseJson = await response.text();
      Alert.alert(
        'Result',
        responseJson,
        [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
        { cancelable: false },
      );
    } catch (error) {
      console.error(error);
    }
  };

  // 组件渲染逻辑省略
};

注意事项 #

• iOS设备图片uri以file://开头，Android可能为content://，React Native的FormData会自动处理这些格式，无需手动转换。
• 确保已配置ImagePicker的权限（Android的READ_EXTERNAL_STORAGE、iOS的相册访问权限）。
• 后端代码无需修改，Postman测试正常说明后端逻辑无问题。

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