Question

大家好，我正在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上传多个文件的解决方案，请告诉我..

Answer 1

Expo-image-picker不支持多项选择。

但是，在SDK24之后，您可以使用EXPO构建自己的多图像选择器。

有关更多信息，请参考此链接link

Answer 2

使用 Expo-image-picker-multiple

https://www.npmjs.com/package/expo-image-picker-multiple

https://www.npmjs.com/package/expo-image-picker-multiple

expo-image-picker上传多张图片

2 个答案: