最近项目开发中遇到需要同时上传多张图片的需求，一番查找使用 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 添加以下权限：
获取权限代码
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'
});
})