当前位置：首页 > React

react native 如何上传照片

2026-03-10 21:32:16React

上传照片的基本流程

React Native 中上传照片通常涉及选择图片、获取图片数据、发送到服务器三个步骤。可以使用 react-native-image-picker 或 expo-image-picker 等库实现。

安装依赖

使用 react-native-image-picker：

yarn add react-native-image-picker
# 或
npm install react-native-image-picker

对于 iOS，需在 Podfile 所在目录执行：

npx pod-install

配置权限

Android 需在 AndroidManifest.xml 添加：

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

iOS 需在 Info.plist 添加：

<key>NSPhotoLibraryUsageDescription</key>
<string>需要访问相册上传照片</string>
<key>NSCameraUsageDescription</key>
<string>需要相机权限拍摄照片</string>

选择图片代码示例

import {launchImageLibrary} from 'react-native-image-picker';

const options = {
  mediaType: 'photo',
  quality: 0.8,
};

const pickImage = async () => {
  const result = await launchImageLibrary(options);
  if (result.didCancel) {
    console.log('用户取消选择');
  } else if (result.errorCode) {
    console.log(result.errorMessage);
  } else {
    const uri = result.assets[0].uri;
    const type = result.assets[0].type || 'image/jpeg';
    const name = result.assets[0].fileName || `photo_${Date.now()}.jpg`;
    return {uri, type, name};
  }
};

上传到服务器

使用 FormData 和 fetch 上传：

const uploadImage = async (image) => {
  const formData = new FormData();
  formData.append('file', {
    uri: image.uri,
    type: image.type,
    name: image.name,
  });

  try {
    const response = await fetch('https://your-api-endpoint.com/upload', {
      method: 'POST',
      body: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    return await response.json();
  } catch (error) {
    console.error('上传失败:', error);
  }
};

完整调用示例

const handleUpload = async () => {
  const image = await pickImage();
  if (image) {
    const result = await uploadImage(image);
    console.log('上传结果:', result);
  }
};

替代方案：Expo 项目

使用 expo-image-picker：

expo install expo-image-picker

代码示例：

react native 如何上传照片

import * as ImagePicker from 'expo-image-picker';

const pickImage = async () => {
  const result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsEditing: true,
    quality: 0.8,
  });
  if (!result.canceled) {
    return result.assets[0];
  }
};