当前位置：首页 > React

react native 如何上传照片

2026-01-24 13:10:13React

上传照片的基本流程

React Native 上传照片通常涉及以下步骤：选择照片、获取照片数据、发送到服务器。需要使用相关库处理文件选择和网络请求。

安装必要依赖

安装 react-native-image-picker 用于照片选择，以及 axios 或 fetch 用于网络请求：

npm install react-native-image-picker axios

对于 iOS，需要额外配置权限。在 Info.plist 中添加：

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

实现照片选择功能

使用 react-native-image-picker 打开相册或相机：

react native 如何上传照片

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('User cancelled image picker');
  } else if (result.error) {
    console.log('ImagePicker Error: ', result.error);
  } else {
    return result.assets[0];
  }
};

构建表单数据并上传

使用 FormData 构建上传数据并通过 axios 发送：

import axios from 'axios';
import {Platform} from 'react-native';

const uploadImage = async (image) => {
  const formData = new FormData();
  formData.append('file', {
    uri: Platform.OS === 'ios' ? image.uri.replace('file://', '') : image.uri,
    type: image.type || 'image/jpeg',
    name: image.fileName || 'upload.jpg',
  });

  try {
    const response = await axios.post('YOUR_UPLOAD_URL', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log('Upload success:', response.data);
  } catch (error) {
    console.error('Upload error:', error);
  }
};

处理 Android 文件路径问题

Android 需要特殊处理文件路径：

react native 如何上传照片

const getAndroidUri = (uri) => {
  if (Platform.OS === 'android') {
    return uri;
  }
  return uri.replace('file://', '');
};

显示上传进度

添加上传进度显示功能：

const uploadWithProgress = async (image) => {
  const formData = /* ... */;

  const config = {
    onUploadProgress: (progressEvent) => {
      const percentCompleted = Math.round(
        (progressEvent.loaded * 100) / progressEvent.total
      );
      console.log(`${percentCompleted}% uploaded`);
    },
  };

  await axios.post('YOUR_UPLOAD_URL', formData, config);
};

错误处理与重试机制

实现更健壮的错误处理：

const MAX_RETRIES = 3;

const uploadWithRetry = async (image, retryCount = 0) => {
  try {
    await uploadImage(image);
  } catch (error) {
    if (retryCount < MAX_RETRIES) {
      await uploadWithRetry(image, retryCount + 1);
    } else {
      throw error;
    }
  }
};

服务器端接收示例

Node.js 服务器接收示例：

const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.json({ message: 'File uploaded successfully' });
});