如何使用react原生图像拾取器添加多个图像

oalqel3c 于 2022-11-17 发布在 React

关注(0)|答案(4)|浏览(190)

我正在构建一个简单的社交媒体应用程序。用户可以添加状态、位置、来自youtube的视频和照片。但是我在使用react原生图像拾取器上传多张图像时遇到了问题。我已经阅读了文档，但我不知道如何解决这个问题
这是我的函数代码

onPhotoPress() {
 const options = {
  quality: 1.0,
  maxWidth: 50,
  maxHeight: 50,
  storageOptions: {
    skipBackup: true,
  },
};
ImagePicker.launchImageLibrary(options, openPicker(), (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 {
    const source = { uri: `data:image/jpeg;base64,${response.data}` };

    this.setState({
      avatarSource: source,
      name: response.fileName,
      data: response.data,
      type: response.type,
      path: response.uri,
    });
  }
 });
}

这是我用于查看图像的代码

{this.state.avatarSource !== null ?
          <Image
            source={this.state.avatarSource}
            style={{
              flex: 1,
              resizeMode: 'contain',
              marginVertical: 12,
            }}
          /> : <View /> }

这是上传单张图片

图片
所以你能帮我，得到多个图像或给予我建议另一个库，我应该使用来解决我的问题

react-native

来源：https://stackoverflow.com/questions/45543706/how-to-add-multiple-image-using-react-native-image-picker

4条答案

按热度按时间

iaqfqrcu1#

这个库最初是作为原生iOS图像拾取器的一个基本桥梁，我希望保持这种状态。因此，这里将不支持原生UIImagePickerController支持的功能之外的功能。多个图像选择、对裁剪工具的更多控制以及横向支持是原生iOS功能中缺少的东西-而不是我的库的问题。如果你需要这些东西，react-native-image-crop-picker可能更适合您。
正如你在React Native Image Picker README中看到的，你不能使用这个模块选择多个图像。你最好尝试使用React Native Image Crop Picker来做这个。

赞(0）回复(0）举报 2022-11-17

zi8p0yeb2#

100% Sure this is working

use the library for multiple images selection and upload 
react-native-image-crop-picker

import ImagePicker from 'react-native-image-crop-picker';

  takePics = () => {
    ImagePicker.openPicker({
      width: 200,
      height: 200, compressImageMaxHeight: 400,
      compressImageMaxWidth: 400, cropping: true, multiple: true
    })
      .then(response => {
        let tempArray = []
        console.log("responseimage-------" + response)
        this.setState({ ImageSource: response })
        console.log("responseimagearray" + this.state.ImageSource)
        response.forEach((item) => {
          let image = {
            uri: item.path,
            // width: item.width,
            // height: item.height,
          }
          console.log("imagpath==========" + image)
          tempArray.push(image)
          this.setState({ ImageSourceviewarray: tempArray })
          // console.log('savedimageuri====='+item.path);

          console.log("imagpath==========" + image)
        })

      })

  }

赞(0）回复(0）举报 2022-11-17

pgvzfuti3#

如果您希望添加多个图像，请尝试多选择器或在此模块中选择图像后对响应进行递归调用。向用户显示弹出窗口以添加更多图像并将所有图像添加到列表中。

赞(0）回复(0）举报 2022-11-17

b1zrtrql4#

在选择文件的选项下添加selectionLimit：5这里是代码。

var imgArray = [];
  const [filePath, setFilePath] = useState([]);
  const [filePathArray, setFilePathArray] = useState([]);
const chooseFile = (type) => {
let options = 
{
      mediaType: type,
      maxWidth: 300,
      maxHeight: 550,
      quality: 1,
      selectionLimit: 5
};
    launchImageLibrary(options, (response) => {

     response.assets.forEach(function (item, index) {

        console.log(item);
        if(item[index] !=null)
        {
          imgArray.push(item[0].uri);
          setFilePathArray(filePathArray => [...filePathArray, imgArray]);
        }

      });
      ///Loop through responses
      setFilePath(response.assets[0]);

    });
  };

而在风景上

<TouchableOpacity
        activeOpacity={0.5}
        style={styles.buttonStyle}
        onPress={() => chooseFile('photo')}>
        <Text style={styles.textStyle}>Choose Image</Text>
      </TouchableOpacity>

赞(0）回复(0）举报 2022-11-17

我来回答

如何使用react原生图像拾取器添加多个图像

4条答案

相关问题

热门标签

最新问答