关于react-native上传图片(单张上传)
若需要选择，裁剪，压缩等功能可以使用 react-native-image-crop-picker
github地址
安装
npm install react
-native
-image
-picker
链接本地
react
-native link react
-native
-image
-picker
配置环境
安卓环境
1，在android
/settings
.gradle文件中添加如下代码：
include
':react-native-image-picker'
project(':react-native-image-picker').projectDir
= new File(settingsDir
, '../node_modules/react-native-image-picker/android')
2，在android
/app
/build
.gradle文件的dependencies中添加如下代码：
compile
project(':react-native-image-picker')
3，在AndroidManifest
.xml文件中添加权限：
<uses
-permission android
:name
="android.permission.CAMERA" />
<uses
-permission android
:name
="android.permission.WRITE_EXTERNAL_STORAGE"/>
4，最后在MainApplication
.Java文件中添加如下代码：
import com
.imagepicker
.ImagePickerPackage
;
new ImagePickerPackage()
ios环境
打开xcode，在info
.plist中配置权限
<plist version
="1.0">
<dict
>
...
<key
>NSPhotoLibraryUsageDescription
</key
>
<string
>$(PRODUCT_NAME) would like access to your photo gallery
</string
>
<key
>NSCameraUsageDescription
</key
>
<string
>$(PRODUCT_NAME) would like to use your camera
</string
>
<key
>NSPhotoLibraryAddUsageDescription
</key
>
<string
>$(PRODUCT_NAME) would like to save photos to your photo gallery
</string
>
<key
>NSMicrophoneUsageDescription
</key
>
<string
>$(PRODUCT_NAME) would like to use your
microphone (for videos
)</string
>
</dict
>
</plist
>
使用
import ImagePicker from 'react-native-image-picker';
示例代码
//选择图片
selectPhotoTapped() { // 点击方法，自定义
const options = {
title: '从相册选择或拍摄',
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍摄',
chooseFromLibraryButtonTitle: '选择照片',
// customButtons: [
// {name: 'fb', title: 'Choose Photo from Facebook'},
// ],
cameraType: 'back',
mediaType: 'photo',
videoQuality: 'high',
durationLimit: 10,
maxWidth: 300,
maxHeight: 300,
quality: 0.8,
angle: 0,
allowsEditing: false,
noData: false,
storageOptions: {
skipBackup: true
}
};
ImagePicker.showImagePicker(options, (response) => {
if (!response.error) {
if (response.didCancel) {
return;
}
const source = response;
this.base64 = response.data;
//注意，iOS 获取的图片地址要替换掉"file://",这是后面上传遇到的坑
source.uri = Platform.OS == 'ios' ? response.uri.replace('file://', '') : response.uri;
let file = {uri: source.uri, type: 'multipart/form-data', name: 'image.png'};
let formData = new FormData();
formData.append('avatar', file);
formData.append('token', this.props.user_token);
// console.log(formData)
this.props.changeUserHead(formData)
}
});
}
