React Native使用Image Picker等实现多图点击上传失败，求示例

1. 使用 react-native-image-picker 实现 #

注意：该组件的相机功能（launchCamera）不支持单次拍摄多张图片，若要获取多张可通过多次调用拍照或结合相册选择；相册选择通过selectionLimit: 0实现多选。

安装与权限配置 #

先安装依赖：

npm install react-native-image-picker --save

• iOS：在Info.plist中添加权限声明

  <key>NSCameraUsageDescription</key>
  <string>需要访问相机拍摄图片</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>需要访问相册选择图片</string>
  

• Android：在AndroidManifest.xml中添加权限

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

组件代码示例 #

import React, { useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import { launchImageLibrary, launchCamera } from 'react-native-image-picker';

const MultiImageUpload = () => {
  const [selectedImages, setSelectedImages] = useState([]);

  // 从相册多选图片
  const pickMultipleImages = () => {
    const options = {
      mediaType: 'photo',
      selectionLimit: 0, // 0表示不限选择数量
      includeBase64: false, // 不需要base64的话设为false，节省内存
    };

    launchImageLibrary(options, (response) => {
      if (response.didCancel) return;
      if (response.errorCode) {
        console.log('选择错误:', response.errorMessage);
        return;
      }
      if (response.assets?.length) {
        setSelectedImages(prev => [...prev, ...response.assets]);
      }
    });
  };

  // 拍照添加单张图片
  const takePhoto = () => {
    const options = {
      mediaType: 'photo',
      includeBase64: false,
    };

    launchCamera(options, (response) => {
      if (!response.didCancel && !response.errorCode && response.assets?.length) {
        setSelectedImages(prev => [...prev, ...response.assets]);
      }
    });
  };

  // 上传图片到服务器
  const uploadImages = async () => {
    if (selectedImages.length === 0) return;
    
    const formData = new FormData();
    selectedImages.forEach((img, idx) => {
      formData.append(`images[${idx}]`, {
        uri: img.uri,
        type: img.type,
        name: img.fileName || `img_${idx}.jpg`,
      });
    });

    try {
      const res = await fetch('你的上传接口地址', {
        method: 'POST',
        body: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const result = await res.json();
      console.log('上传成功:', result);
    } catch (err) {
      console.log('上传失败:', err);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="从相册选多张图" onPress={pickMultipleImages} />
      <Button title="拍照添加" onPress={takePhoto} />
      <Button title="上传图片" onPress={uploadImages} />
      
      <View style={styles.imageWrap}>
        {selectedImages.map((img, idx) => (
          <Image key={idx} source={{ uri: img.uri }} style={styles.image} />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
  },
  imageWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 20,
  },
  image: {
    width: 100,
    height: 100,
    margin: 5,
    borderRadius: 8,
  },
});

export default MultiImageUpload;

2. 使用 react-native-image-crop-picker 实现 #

该组件的openCamera同样不支持单次拍多张，多选仅适用于相册选择。

安装与权限配置 #

安装依赖：

npm install react-native-image-crop-picker --save

权限配置和上面一致，iOS修改Info.plist，Android修改AndroidManifest.xml即可。

组件代码示例 #

import React, { useState } from 'react';
import { View, Button, Image, StyleSheet } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

const MultiImageUploadCrop = () => {
  const [selectedImages, setSelectedImages] = useState([]);

  // 相册多选图片
  const pickMultipleImages = () => {
    ImagePicker.openPicker({
      multiple: true,
      mediaType: 'photo',
      includeBase64: false,
    })
    .then(images => {
      setSelectedImages(prev => [...prev, ...images]);
    })
    .catch(err => {
      if (err.code !== 'E_PICKER_CANCELLED') {
        console.log('选择错误:', err);
      }
    });
  };

  // 拍照添加单张图片
  const takePhoto = () => {
    ImagePicker.openCamera({
      mediaType: 'photo',
      includeBase64: false,
    })
    .then(image => {
      setSelectedImages(prev => [...prev, image]);
    })
    .catch(err => {
      if (err.code !== 'E_PICKER_CANCELLED') {
        console.log('拍照错误:', err);
      }
    });
  };

  // 上传图片到服务器
  const uploadImages = async () => {
    if (selectedImages.length === 0) return;
    
    const formData = new FormData();
    selectedImages.forEach((img, idx) => {
      formData.append(`images[${idx}]`, {
        uri: img.uri,
        type: 'image/jpeg',
        name: img.filename || `img_${idx}.jpg`,
      });
    });

    try {
      const res = await fetch('你的上传接口地址', {
        method: 'POST',
        body: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      });
      const result = await res.json();
      console.log('上传成功:', result);
    } catch (err) {
      console.log('上传失败:', err);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="从相册选多张图" onPress={pickMultipleImages} />
      <Button title="拍照添加" onPress={takePhoto} />
      <Button title="上传图片" onPress={uploadImages} />
      
      <View style={styles.imageWrap}>
        {selectedImages.map((img, idx) => (
          <Image key={idx} source={{ uri: img.uri }} style={styles.image} />
        ))}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    alignItems: 'center',
  },
  imageWrap: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 20,
  },
  image: {
    width: 100,
    height: 100,
    margin: 5,
    borderRadius: 8,
  },
});

export default MultiImageUploadCrop;

关键说明 #

• 两个组件的相机功能都不支持单次拍摄多张，这是原生相机本身的限制，若要多张只能通过多次拍照或相册选择实现。
• 上传时使用FormData格式，符合大多数后端接口的接收要求。

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