react-native - expo-image-picker 上传多张图片
问题描述
大家好,我正在学习 react-native 中的 expo-image-picker,当我上传一张图片时一切都很好,但我想上传多张图片。但如果有人知道该怎么做,它就不起作用,请帮忙。
这是我尝试检查一次的代码..
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [9, 16],
quality: 1.0,
allowsMultipleSelection: true,
});
console.log(result);
if (!result.cancelled) {
this.setState({ image: result.uri });
}
};
getPermissionAsync = async () => {
if (Constants.platform.android) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
status = await Permissions.getAsync(Permissions.CAMERA);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
}
import React, { Component } from 'react';
import {
Image, Platform, StyleSheet, Text, View, TextInput, Button, TouchableHighlight, Alert,
TouchableOpacity, ScrollView, ColorPropType, FlatList, SectionList, Dimensions, AsyncStorage,
Keyboard, Modal, NativeModules, SafeAreaView, StatusBar,
} from 'react-native';
import PropTypes from 'prop-types'
// import { Video } from 'expo-av';
import { Camera } from 'expo-camera';
import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
export default class AddPostScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
image: null,
images: [],
};
}
async componentDidMount() {
this.get_Id();
this.getPermissionAsync();
this.get_PermissionAsync();
}
_pickCamera = async () => {
let result = await await ImagePicker.launchCameraAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: false,
aspect: [4, 3],
quality: 1.0,
allowsMultipleSelection: true,
});
console.log(result);
if (!result.cancelled) {
this.setState({ image: result.uri });
}
};
get_PermissionAsync = async () => {
if (Constants.platform.android) {
const { status } = await Permissions.getAsync(Permissions.CAMERA);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
}
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [9, 16],
quality: 1.0,
allowsMultipleSelection: true,
});
console.log(result);
if (!result.cancelled) {
this.setState({ image: result.uri });
}
};
getPermissionAsync = async () => {
if (Constants.platform.android) {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
status = await Permissions.getAsync(Permissions.CAMERA);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
}
}
render() {
const { image, images } = this.state;
return (
<View style={styles.container}>
<View style={styles.ifContainer}>
<View>
<Image style={styles.imageView} source={{ uri: this.state.image }} />
<View style={styles.row}>
<Button style={styles.button} onPress={this._pickImage} title="Open Gallery" />
<Button style={styles.button} onPress={this._pickCamera} title="Open Camera" />
</View>
</View>
</View>
</View >
);
}// render ends
} // class Ends
app.json 中的权限
"android": {
"package": "com.srastr.howtags",
"versionCode": 6,
"googleServicesFile": "./google-services.json",
"permissions": [
"CAMERA",
"CAMERA_ROLL",
"READ_INTERNAL_STORAGE",
"READ_EXTERNAL_STORAGE",
"WRITE_EXTERNAL_STORAGE",
"RECORD_AUDIO"
]
}
如果有人知道使用 expo-imagepicker 上传多个文件的解决方案,请告诉我..
解决方案
使用 Expo-image-picker-multiple
https://www.npmjs.com/package/expo-image-picker-multiple
https://www.npmjs.com/package/expo-image-picker-multiple
推荐阅读
- javascript - 将 s3 对象数据放入数组 - 节点
- c# - Elasticsearch 术语聚合返回空存储桶
- python - Python:如何区分输入是整数还是浮点数
- javascript - 前端在 CORS 请求中从后端获取错误 401 - apache/php 配置不足?
- python - Pandas 如何在 agg 函数后展平列?
- elasticsearch - 在 Elasticsearch 中计算相关性评分与 Couchbase 有何不同?
- javascript - 未经授权的 url 上的 Json 调用在 JSON 位置返回 Unexpected token <
- xml - VBA 格式化问题处理 XML - Microsoft XML6.0
- opengl - pyrr.Matrix44 布局实际上是列主要的吗?
- node.js - 在 heroku 上部署 Nodejs 应用程序时出现 BABEL_PARSE_ERROR