最近项目开发中遇到需要同时上传多张图片的需求，一番查找使用 react-native-syan-image-picker 组件

1.react-native: "0.60.5"
2.react-native-syan-image-picker : "^0.4.6"

一、安装 react-native-syan-image-picker

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

yarn add react-native-syan-image-picker 

因为react-native 0.60 版本起会自动 Link 所以这里直接跳过Link步骤；如果自动Link出现问题则需要手动Link

1.1 拍照前动态获取权限
获取权限前需配置 AndroidManifest.xml 添加以下权限：

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

获取权限代码

requestPermission = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    title: '申请读写手机存储权限',
                    message: '获取拍照权限'， 
                    buttonNeutral: '稍后',
                    buttonNegative: '拒绝',
                    buttonPositive: '允许',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                console.log('现在你获得摄像头权限了');
            } else {
                console.log('用户拒绝获得摄像头权限');
            }
        } catch (err) {
            console.warn(err); //错误
        }
    };

做好以上准备就可以撸核心代码了

二 、方法调用

Callback 回调形式需调用 showImagePicker 方法：

import SyanImagePicker from 'react-native-syan-image-picker';

SyanImagePicker.showImagePicker(options, (err, selectedPhotos) => {

 if (err) { 
   // 取消选择 
   return;

 }

 // 选择成功，渲染图片

 // ...

})

非回调形式则使用 asyncShowImagePicker 方法：

import SyanImagePicker from 'react-native-syan-image-picker';

// promise-then

SYImagePicker.asyncShowImagePicker(options)

  .then(photos => {

    // 选择成功

  })

  .catch(err => {

    // 取消选择，err.message为"取消"

  });

// async/await

handleSelectPhoto = async () => { 
  try {

    const photos = await SYImagePicker.asyncShowImagePicker(options);

    // 选择成功

  } catch (err) {

    // 取消选择，err.message为"取消"

  }

}

任选一种即可，以下为ReactNative代码示例

//选择图片
Introduce() {
        const options = {
            imageCount: 10,          // 最大选择图片数目，默认6
            isCamera: true,         // 是否允许用户在内部拍照，默认true
            isCrop: false,          // 是否允许裁剪，默认false
            CropW: ~~(width * 0.6), // 裁剪宽度，默认屏幕宽度60%
            CropH: ~~(width * 0.6), // 裁剪高度，默认屏幕宽度60%
            isGif: false,           // 是否允许选择GIF，默认false，暂无回调GIF数据
            showCropCircle: false,  // 是否显示圆形裁剪区域，默认false
            showCropFrame: true,    // 是否显示裁剪区域，默认true
            showCropGrid: false     // 是否隐藏裁剪区域网格，默认false
        }
        this.requestPermission()
        SYImagePicker.asyncShowImagePicker(options)
            .then(photos => {  
                //photos 返回实例
  // [{
                //     "height": "540",
                //     "original_uri": "file:///storage/emulated/0/Pictures/Screenshots/Screenshot_2020-01-19-09-23-47.png",
                //     "size": "88704",
                //     "type": "image",
                //     "uri": "file:///storage/emulated/0/Android/data/com.jzpfsc/files/Pictures/IMG_20200226_16044036.png",
                //     "width": "540"
                // }, {
                //     "height": "540",
                //     "original_uri": "file:///storage/emulated/0/Pictures/Screenshots/Screenshot_2020-01-19-09-18-34.png",
                //     "size": "119783",
                //     "type": "image",
                //     "uri": "file:///storage/emulated/0/Android/data/com.jzpfsc/files/Pictures/IMG_20200226_160441.png",
                //     "width": "540"
                // }]
                // 图片上传
                return uploadImages(photos)
                .then((response) => response.json())
                .then((responseData) => {
                    console.log(responseData.msg)
                })
                .catch((err) => {
                    console.log('err', err); 
                });
      // 图片上传end
            })
            .catch(err => {
                // 取消选择，err.message为"取消"
                console.log('失败', err)
            })
    }

采用fetch上传

uploadImages(Files){
    var formData = new FormData();
    Files.map((item) => {
        formData.append('image[]', {
            uri: item.original_uri,
            name: (new Date().valueOf()) + '.jpg',
            type: 'image/jpeg'
        });
    })
    var url = 'http://192.168.1.200:8033/api/wxapi/allupload' 
    return  fetch(url, {
        method: 'POST',
        body: formData,
    })  
} 

后端代码（以thinkphp为例）

 public function allupload()
    {
        header('Access-Control-Allow-Origin: *'); //允许跨域
        $arrList = ["msg" => "上传成功", "err_code" => 200, "ImageList" => []]; //图片上传成功信息
        $fileHost = request()->domain(); //当前域名
        $files = request()->file('image'); //获取Imags文件流
        foreach ($files as $file) {
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'); //移动到public/uploads 文件夹
            if ($info) {
                // 成功上传后 获取上传信息 
                $fileName = $info->getSaveName(); //获取文件名称
                array_push($arrList['ImageList'], $fileHost . '/public/uploads/' . $fileName); //返回对应信息;
            } else {
                // 上传失败获取错误信息
                return json_encode(["msg" => "上传失败，参数错误请联系管理员", "err_code" => 1,]); //图片上传成功信息 
            }
        }
        return json_encode($arrList);
    }

注意

使用formData作为数据发送多文件时需使用[]方括号，如以下image[]，如果不使用[]则后端无法识别或只能识别一个文件。单文件则不用。

  var formData = new FormData();
    Files.map((item) => {
        formData.append('image[]', {
            uri: item.original_uri,
            name: (new Date().valueOf()) + '.jpg',
            type: 'image/jpeg'
        });
    })