版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/88567541
github地址:
https://github.com/react-native-community/react-native-image-picker
效果图:
使用步骤:
1cd 到项目目录下
yarn add react-native-image-picker
react-native link react-native-image-picker
2在android目录下在AndroidManifest文件中添加权限
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
3复制文档代码,并使用fetch上传图片
ChoosePictureUpLoad.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button, Image, Alert} from 'react-native';
import ImagePicker from 'react-native-image-picker';
/**
* 从相机,或者相册中选择图片,并上传到服务器
*/
export default class ChoosePictureUpLoad extends Component {
constructor(props) {
super(props);
this.state = {
avatarSource: {},
}
}
// 选择图片
onClick = () => {
this.myDialog();
}
// 上传图片
onClickUpLoad = () => {
this.httpUpLoad();
}
//上传图片和文字
httpUpLoad = () => {
// let url = 'http://127.0.0.1:4000/uploadimg';
let url = 'http://47.100.202.184:4000/uploadimg';
let uri = this.state.avatarSource.uri;
let formData = new FormData();//如果需要上传多张图片,需要遍历数组,把图片的路径数组放入formData中
//这里的key(uri和type和name)不能改变,
// name: 'image.jpg',是把你上传的图片转化成jpg格式
let file = {uri: uri, type: 'multipart/form-data', name: 'image.jpg'};
formData.append("username", "zhh1");
formData.append("image", file); //这里的files就是时后台需要的key
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
},
body: formData,
})
.then((response) => response.text())
.then((responseData) => {
console.warn(responseData);
})
.catch((error) => {
console.error('error', error)
});
}
//调用相机的弹出框
myDialog = () => {
const options = {
title: '',
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '选择照片',
storageOptions: {
skipBackup: true,
path: 'images',
}
};
ImagePicker.showImagePicker(options, (response) => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
} else {
const source = {uri: response.uri};
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
this.setState({
avatarSource: source,
});
console.warn(this.state.avatarSource.uri);
}
});
}
render() {
return (
<View style={styles.container}>
<Text
style={styles.instructions}
onPress={() => this.onClick()}
>选择图片</Text>
<Text
style={styles.instructions}
onPress={() => this.onClickUpLoad()}
>上传</Text>
<Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
marginTop: 30,
},
instructions: {
color: '#333333',
marginTop: 30,
backgroundColor: '#66CCFF',
padding: 10,
width: 100,
height: 40,
},
uploadAvatar: {
width: 100,
height: 100,
},
});
源码下载:
walldemo2----ChoosePictureUpLoad
https://download.csdn.net/download/zhaihaohao1/11022244