React Native ImagePicker：解决相机上传图片超时问题-js教程-PHP中文网

React Native ImagePicker：解决相机上传图片超时问题

碧海醫心

发布： 2025-10-18 09:10:14

原创

153人浏览过

react native imagepicker：解决相机上传图片超时问题

本文旨在解决 React Native 应用中使用 `react-native-image-crop-picker` 库时，从相册选择图片可以成功上传，但使用相机拍摄图片上传时出现 504 超时错误的问题。文章将分析问题可能的原因，并提供针对性的解决方案，帮助开发者顺利实现相机图片的上传功能。

在 React Native 应用开发中，经常需要实现用户上传头像或图片的功能。react-native-image-crop-picker 是一个常用的图片选择和裁剪库，但有时会遇到从相册选择图片可以正常上传，而使用相机拍摄的图片上传时却出现超时（504 错误）的问题。这通常是由于 ImagePicker.openCamera 和 ImagePicker.openPicker 返回的数据结构存在差异，导致上传时处理不当引起的。

问题分析

问题的主要原因是 ImagePicker.openCamera 和 ImagePicker.openPicker 返回的图片信息格式可能不一致，特别是 uri 属性。在 Android 平台上，相机拍摄的图片路径可能需要特殊处理才能被正确上传。

解决方案

为了解决这个问题，建议针对从相册选择和相机拍摄的图片分别进行处理，确保上传的文件对象格式一致。

配置项统一

首先，定义一个统一的配置对象，用于配置 ImagePicker.openPicker 和 ImagePicker.openCamera，保证裁剪行为一致。

const CONFIG_IMAGE_CROP_INVOICE = {
    freeStyleCropEnabled: true,
    cropperChooseText: 'Crop',
    cropperCancelText: 'Cancel',
    cropperToolbarTitle: 'Edit Image',
    cropperToolbarColor: '#2196F3',
    width: 1200,
    height: 1500,
    cropping: true,
    forceJpg: true,
    enableRotationGesture: true,
}

登录后复制

创建图片处理函数

针对从相册选择的图片，创建一个 uploadPhotoFromLibrary 函数，用于提取所需的文件信息。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

const uploadPhotoFromLibrary = image => {
    const file = {
      uri: image.path,
      name: image.path.split("/").pop(),
      type: image.mime,
    };
    return file;
  };

登录后复制

创建相机图片处理函数

针对相机拍摄的图片，创建一个 uploadPhotoFromCamera 函数。这个函数需要特别注意 uri 的处理，尤其是在 Android 平台上。

const uploadPhotoFromCamera = image => {
  const file = {
    name: image?.path.split("/").pop(),
    type: image?.mime,
    uri:
      Platform.OS === 'android' ? image?.path : image?.path.replace('file://', ''),
  };
  return file;
};

登录后复制

在 Android 平台上，直接使用 image.path 作为 uri。在 iOS 平台上，需要将 file:// 前缀移除。

修改图片选择和拍照函数

修改 choosePhotoFromLibrary 和 takePhotoFromCamera 函数，分别调用对应的图片处理函数。

const choosePhotoFromLibrary = () => {
  ImagePicker.openPicker(CONFIG_IMAGE_CROP_INVOICE)
    .then(image => {
      console.log(image);
      const file = uploadPhotoFromLibrary(image);
      // 处理你的逻辑
      uploadFile(file) // 添加 token 到 params 函数以使用你的代码：uploadFile(receipt, idToken)
    })
    .catch(e => {
      console.log(e);
    });
}

const takePhotoFromCamera = () => {
  ImagePicker.openCamera(CONFIG_IMAGE_CROP_INVOICE)
  .then(async image => {
    console.log(image);
    const file = uploadPhotoFromCamera(image);
    // 处理你的逻辑
    uploadFile(file) // 添加 token 到 params 函数以使用你的代码：uploadFile(receipt, idToken)
  })
  .catch(e => {
    console.log(e);
  });
}

登录后复制

修改上传函数

确保上传函数能够正确处理不同平台和来源的图片 uri。检查 FormData 的构建方式，确保 uri 格式正确。

static uploadFile = async (filePath: string, idToken: string): Promise<AxiosResponse> => {
    return new Promise(async (resolve, reject) => {

      console.log("filepath: " + filePath);

      const formData = new FormData();
      formData.append('file', {
        name: 'profileImage',
        uri: filePath, // 直接使用传入的 filePath
        type: 'image/jpg'
      });

      try {
        const response = await axios.post(`${API_BASE_URL}`, formData, {
          headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data',
            Authorization: idToken
          }
        });
        resolve(response);
      } catch (error) {
        console.error(error);
        reject(error);
      }
    })
  }

登录后复制

注意事项