#react-native多图上传 react-native-image-picker
话不多说 直接贴代码, 如有疑问 下方留言或者发邮箱
引入需要的组件
import ImagePicker2 from 'react-native-image-picker';
import RNHeicConverter from 'react-native-heic-converter';
// RNHeicConverter图片转换 IOS11之后 有HEIC图片需要转换 不然显示不出来
clas Page extends Component {
constructor(props) {
super(props);
this.state = {
files: [],
title: "",
content: "",
src: [],
selectMap: new Map(),
};
this.srcArr = []
}
<View style={{marginHorizontal: 10, marginVertical: 10, flexDirection: 'row', flexWrap: 'wrap'}}>
{
temp ? temp.map((v, i) => {
return (
<View
style={{
flexDirection: 'row',
marginRight: 10,
marginBottom: 10,
position: 'relative'
}}
key={i}
>
<Image
roundAsCircle={true}
style={{
height: 70,
width: 70,
borderRadius: 10
}} source={{uri: v}}
/>
<TouchableOpacity
style={{
position: 'absolute',
top: 0,
right: 0
}}
onPress={()=>{
let newMap = this.state.selectMap
let temp = [...this.state.selectMap.values()];
let temp2 = [...this.state.selectMap.keys()];
newMap.delete(temp2[i], temp[i])
this.setState({
selectMap:newMap
})
}}
>
<Image
style={{
height: 18,
width: 18
}}
source={require('../images/删除图片.png')}
/>
</TouchableOpacity>
</View>
)
}) : null
}
{
temp.length === 4 ?
<Tip tipMsg="*注:最多上传四张图片哦"/>
:
<TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}>
<View style={[{marginBottom: 20}]}>
<Image
style={{width: 70, height: 70}}
source={require('../images/增加按钮.png')}
/>
</View>
</TouchableOpacity>
}
</View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
selectPhotoTapped() {
const options = {
title: '选择图片',
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '选择照片',
cameraType: 'back',
mediaType: 'photo',
videoQuality: 'medium', // 图片质量
durationLimit: 10, //
maxWidth: 500, // 图片大小
maxHeight: 500, // 图片大小
quality: 0.8,
angle: 0,
allowsEditing: false,
noData: false,
storageOptions: {
skipBackup: true
}
};
ImagePicker2.showImagePicker(options, (response) => {
// console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled photo picker');
}
else if (response.error) {
console.log('ImagePicker Error: ', response.error);
}
else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
}
else {
Toast.loading('上传中...')
console.log(response)
let source = {}
if (Platform.OS === 'ios' && (response.fileName.endsWith('.heic') || response.fileName.endsWith('.HEIC'))) {
RNHeicConverter.convert({ path: response.origURL }).then((data) => {
const { success, path, error } = data
if(!error && success && path) {
let name = response.fileName
name = name.replace(".heic", ".jpg")
name = name.replace(".HEIC", ".jpg")
source = {uri: path, name}
console.log(source)
} else {
Toast.show('图片上传失败!')
}
})
} else {
source = {uri: response.uri, type: response.type, name: response.fileName}
console.log(source)
}
upload("/api/UploadImage/uploadDisplayImage", response)
.then(param => {
const responseData = JSON.parse(param.data)
console.log(response)
console.log(param)
let newMap = this.state.selectMap
this.srcArr.push(responseData.data)
newMap.set(response.fileName, response.uri)
Toast.info("上传成功",0.5)
this.setState({
selectMap: newMap,
src: this.srcArr
});
})
.catch(err => {
console.log(err)
Toast.info("上传失败",0.5);
this.setState({
files: []
});
})
}
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
submitFeedback = () => { // 提交到服务端
const {navigation: {state}, loginSession} = this.props;
const {token, uuid} = loginSession
const {title, content, files, concat, src} = this.state;
console.log(this.state)
if (title.length === 0 || content.length === 0) {
Toast.info("请填写标题和内容");
return;
}
if (src.length === 0) {
Toast.info("请上传图片")
return;
}
this.props.dispatch({ //
type: 'photoFeedBackPage/MemberDisplayAdd',
payload: {
token,
uuid,
title,
content,
display_img: src.join(';')
}
})
}
————————————————
版权声明：本文为CSDN博主「学习笔记999」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/z93701081/article/details/83587175
网友评论