React Native用expo-image-picker-multiple选图报错，传图到GCP

当前代码存在的逻辑问题 #

• 回调入参逻辑完全错位：自定义按钮的onPress触发时，回调函数拿到的入参是React Native原生的点击事件对象，不是代码预期的Promise实例。把事件对象当成Promise调用.then方法，直接触发callback.then is not a function的报错。函数内部定义的image是局部变量，就算成功拿到数据也会在函数执行结束后被回收，无法后续复用做上传逻辑。
• 未对接ImageBrowser组件的核心API：expo-image-picker-multiple的ImageBrowser组件需要通过loader属性接收数据回传方法，当前代码没有绑定这个属性，组件完全不知道要把用户选中的照片列表传递给哪个处理逻辑。
• 权限模块导入缺失：代码中使用了Permissions和Permissions.CAMERA_ROLL枚举值，但没有从expo对应模块导入，运行到权限申请逻辑时会直接抛出未定义引用错误。
• iOS端系统权限配置遗漏：没有在项目配置中声明相册权限的用途说明，iOS系统会直接拦截权限申请流程，无法正常读取本地相册。
• 上传逻辑链路断裂：没有建立选中图片到Node后端的传输通道，就算拿到图片数组也没有对应的构造请求、传递数据的逻辑，无法触发后端向GCP存储桶的存储流程。

分步修正实现 #

1. 补全缺失依赖导入 #

在文件头部补充权限模块的导入，解决未定义报错：

import * as Permissions from 'expo-permissions';
// 其余原有导入逻辑保持不变

2. 调整组件状态存储选中图片 #

替换原来写在函数内部的临时变量，用组件状态暂存选中的图片数组，保证数据可以在整个组件生命周期内访问：

// 在类组件的属性里声明选中图片的存储位
state = {
  selectedImages: []
}

3. 绑定ImageBrowser的内置回传逻辑 #

把原来错误挂在按钮上的回调，替换为组件要求的loader属性绑定，接收组件回传的选中照片列表：

handlePhotosSelected = (photosPromise) => {
  // 组件回传的本身就是Promise，不需要额外包一层入参
  photosPromise.then((selectedPhotos) => {
    this.setState({ selectedImages: selectedPhotos });
    console.log('选中的照片列表', selectedPhotos);
  }).catch(err => console.log('选择照片出错', err))
}

// 替换ImageBrowser组件的属性配置
<ImageBrowser
  max={4}
  loader={this.handlePhotosSelected}
  renderSelectedComponent={this.renderSelectedComponent}
  emptyStayComponent={emptyStayComponent}
/>

4. 修正按钮的触发逻辑 #

把原来错位的按钮回调改成触发上传流程，构造符合后端要求的FormData请求，把选中的图片传递给Node后端API：

<Button 
  title="Add Photos" 
  onPress={async () => {
    const formData = new FormData();
    this.state.selectedImages.forEach((image, index) => {
      formData.append('uploadedPhotos', {
        uri: image.uri,
        name: `selected_${index}.jpg`,
        type: 'image/jpeg'
      });
    });
    // 调用Node后端接口，后端收到文件后完成GCP存储桶的写入
    await fetch('你的后端服务接口地址', {
      method: 'POST',
      body: formData,
      headers: { 'Content-Type': 'multipart/form-data' }
    });
  }}
/>

5. 补全iOS端系统权限声明 #

在项目根目录的app.json的ios.infoPlist字段下添加相册权限说明，通过系统审核：

"NSPhotoLibraryUsageDescription": "需要访问本地相册选择需要上传的图片"

内容的提问来源于stack exchange，提问作者Poornima Gurudath