首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >expo-image-picker上传多张图片

expo-image-picker上传多张图片
EN

Stack Overflow用户
提问于 2019-11-08 22:22:16
回答 1查看 3K关注 0票数 2

大家好,我正在学习expo- image -picker in react-native,当我上传一张图片时,一切都很好,但我想上传多张图片。但它不工作,如果有人知道如何做,请帮助。

这是我试过检查过的代码..

代码语言:javascript
运行
复制
_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!');
      }
    }
  }
代码语言:javascript
运行
复制
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中的权限

代码语言:javascript
运行
复制
"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上传多个文件的解决方案,请告诉我。

EN

回答 1

Stack Overflow用户

发布于 2021-06-15 06:35:23

使用Expo-image-picker-multiple

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

代码语言:javascript
运行
复制
https://www.npmjs.com/package/expo-image-picker-multiple
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58768358

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档