React Native通过REST API上传图片：如何将路径转为文件提交？

核心思路是把Redux中存储的图片路径转成二进制Blob对象，再通过FormData提交给REST API。以下是具体步骤和代码示例：

1. 确认图片路径有效性 #

你使用的图片选择/拍摄库（比如react-native-image-picker或expo-image-picker）返回的路径通常是file://开头的本地路径，Redux存储的应该是这类标准路径。如果路径格式异常，先检查图片选择逻辑的返回值。

2. 将路径转换为Blob对象 #

可以用原生fetch或者react-native-fs读取本地文件并转成Blob：

方法一：使用原生fetch #

const pathToBlob = async (imagePath) => {
  // 兼容部分Android设备的路径格式，移除多余的file://前缀
  const filePath = imagePath.replace('file://', '');
  const response = await fetch(`file://${filePath}`);
  const blob = await response.blob();
  return blob;
};

方法二：使用react-native-fs（稳定性更高） #

先安装依赖：

npm install react-native-fs --save

然后实现转Blob逻辑：

import RNFS from 'react-native-fs';

const pathToBlob = async (imagePath) => {
  const filePath = imagePath.replace('file://', '');
  const fileBase64 = await RNFS.readFile(filePath, 'base64');
  const blob = new Blob([Buffer.from(fileBase64, 'base64')], { type: 'image/jpeg' });
  return blob;
};

3. 构建FormData并发起上传请求 #

从Redux取出路径数组，循环处理每个路径，将Blob添加到FormData后提交：

import { useSelector } from 'react-redux';
import axios from 'axios';

const uploadImages = async () => {
  // 从Redux获取存储的图片路径数组
  const imagePaths = useSelector(state => state.images.paths);
  const formData = new FormData();

  // 遍历路径，转Blob后加入FormData
  for (let i = 0; i < imagePaths.length; i++) {
    const blob = await pathToBlob(imagePaths[i]);
    // 字段名需和服务器接口要求一致，多图推荐用`images[]`格式
    formData.append('images[]', blob, `upload_image_${i}.jpg`);
  }

  try {
    const response = await axios.post('你的服务器上传API地址', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        // 若接口需要鉴权，添加对应的请求头
        // 'Authorization': `Bearer ${yourAuthToken}`
      }
    });
    console.log('上传成功', response.data);
    // 上传成功后可dispatch action清空Redux中的路径数组
  } catch (error) {
    console.error('上传失败', error);
  }
};

4. Redux相关注意点 #

• 存储路径时，直接保存图片选择库返回的uri字段即可，确保是完整的本地路径
• 上传完成后，记得dispatch对应的action清空Redux中的路径数组，避免重复上传

常见坑点 #

• iOS权限：需在Info.plist中添加相册、相机的权限申请描述
• Android路径兼容：部分设备返回的路径无file://前缀，处理时要做兼容判断
• Blob类型匹配：根据图片实际格式设置Blob的type（比如image/png、image/jpeg）

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