React Native 上传多张图片

8fsztsew 于 2023-11-21 发布在 React

关注(0)|答案(3)|浏览(176)

大家好，我正在学习react-native中的图像拾取器，当我上传一张图像时一切都很好，但我想上传多张图像。但如果有人知道如何做到这一点，请帮助。
这是我尝试检查一次的代码。

_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!');
      }
    }
  }

个字符
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"
      ]
    }

型
如果任何人知道的解决方案，以上传多个文件，使用mimagepicker请告诉我。

react-native

来源：https://stackoverflow.com/questions/58768358/expo-image-picker-upload-multiple-images

3条答案

按热度按时间

vh0rcniy1#

我的解决方案是切换回Expo 48.x。
现在是2023年11月。我使用expo 49.0.16和三星s21。当我输入allowsMultipleSelection：true时，我仍然有问题：（许可授予，如果我切换回expo 48.x，它可以工作）
可能的未处理的承诺拒绝（id：0）：错误：对函数“ExponentImagePicker.launchImageLibraryAsync”的调用已被拒绝。→引起于：java.lang.IllegalArgumentException：Uri缺少“file”方案：content：//media/picker/0/com.android.providers.media.LaunchImageLibraryAsync“错误：对函数”ExponentImagePicker.launchImageLibraryAsync“的调用已被拒绝。→引起于：java.lang.IllegalArgumentException：Uri缺少”file“方案：content：//media/picker/0/com.android.providers.media. picker/media/1000000988 at construct（native）at apply（native）at _construct（http://192.168.12.3:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:4485:28）at Wrapper（http://192.168.12.3:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:4443:25）at construct（native）at _construct SuperInternal（http://192.168.12.3:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:124261:322）at call（native）at CodedError（http://192.168.12.3:8081/node_modules/expo/AppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:124274:26）

赞(0）回复(0）举报 2023-11-21

h9a6wy2h2#

使用Expo-image-picker-multiple
第一个月

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

字符串

赞(0）回复(0）举报 2023-11-21

nnt7mjpx3#

也许这有点太晚了，但我刚刚用mart-image-picker实现了多重选择。
你可以像这样声明一个状态变量

const [pickedImages, setPickedImages] = useState({
    images: [''],
  });

字符串
此时，通过向images数组中添加选择来设置PickedImages

_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.setPickedImages(prevState => ({
            images: [...prevState.images, result.uri],
          }));
    }
  };

型
本部分：

this.setPickedImages(prevState => ({
                images: [...prevState.images, result.uri],
              }));

型
将确保多个图像添加到数组中，您可以使用map函数显示，例如：

{pickedImages.length > 0 &&
        pickedImages.map((value, index) => {
          return (
            <View key={index}>
              <Text>{value}</Text>
            </View>
          );
        })}

型

赞(0）回复(0）举报 2023-11-21

我来回答

React Native 上传多张图片

3条答案

相关问题

热门标签

最新问答