React native 反应本机，谷歌照片API图像上传

react native+expo

TL；DR：是否有人有react native/expo使用应用程序内摄像头并将图像上传到“新”的工作示例

验证用户（正在工作）

（工作）

（工作）

拍照（工作）

（好像它在工作）

（不工作）

为什么我认为（5）看起来是有效的，因为getUploadToken函数成功返回response 200，并提供一个键

为什么我认为它在（5）的另一端可能是一个愚蠢的服务，我可以向它发布任何东西，它将成功返回

我的直觉是，我将图像上载到/uploads端点的方式有问题

IE：格式不正确

this.state.image=={'base64'：'base64string'，'uri'：'file://...“，…}

我确实看到一个相册正在我的谷歌照片中创建，我可以看到它被设置为可共享，没有任何特权（用户不能评论或添加他们自己的照片）

2制作相册

makeAlbum = () => {
    //MAKE ALBUM
    fetch('https://photoslibrary.googleapis.com/v1/albums', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+this.state.accessToken
      },
      body: JSON.stringify({
        "album": {"title": this.state.albumTemp}
      }),
    }).then((response) => response.json())
      .then((response) => {
        [
          this.shareAlbum(response),
          console.log('make: ',response)
        ]
    });
  }
}

3使相册可共享

shareAlbum = (response) =>{
    this.setState({albumId:response.id})
    //MAKE ALBUM SHAREABLE
    fetch('https://photoslibrary.googleapis.com/v1/albums/'+this.state.albumId+':share',{
      method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer '+this.state.accessToken
        }
    }).then((response) => response.json())
      .then((response)=>{
        [
          this.setState({shareable:response.shareInfo.shareableUrl}),
          console.log('share1: ',this.state.shareable),
          console.log('share2: ',response),
        ]
    });
  }

4张拍摄照片

capturePhoto = async () => {
    let image = await this._camera.takePictureAsync({
      base64: true,
      quality: .5,
      width: 1920,
      fixOrientation: true
    })
    this.setState({ image: image, capturing: false })
    // delay the capture a few seconds to make sure it's rendered
    setTimeout(async () => {
      let result = await takeSnapshotAsync(this._previewRef, {
        format: 'png',
        result: 'tmpfile',
        quality: 1
      });
      //upload the photo to google photos album
      this.getUploadToken(image)
    }, 1000)
  }

uploadPhoto = (token) => {
fetch('https://photoslibrary.googleapis.com/v1/mediaItems:batchCreate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+this.state.accessToken,
      },
      body:JSON.stringify({
        "albumId": this.state.albumId,
        "newMediaItems": [
          {
            "description": "Event Photo",
            "simpleMediaItem": {
              "uploadToken": token
            }
          }
        ]
      })
    })
    .then((response) => {
      console.log('actual upload: ',response)
      this.setState({ ready: true, image: null })
    })
  }

5获取上传令牌

getUploadToken = (image) => {
    let name = this.state.image.uri.split('/')
    name=name[name.length-1]
    fetch('https://photoslibrary.googleapis.com/v1/uploads', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/octet-stream',
        'Authorization': 'Bearer '+this.state.accessToken,
        'X-Goog-Upload-File-Name': name,
        'X-Goog-Upload-Protocol': 'raw'
      },
      body:image,
    })
    .then((response) => {
      console.log('setup upload: ',response)
      this.uploadPhoto(response._bodyText); 
    })
  }

6上传照片

capturePhoto = async () => {
    let image = await this._camera.takePictureAsync({
      base64: true,
      quality: .5,
      width: 1920,
      fixOrientation: true
    })
    this.setState({ image: image, capturing: false })
    // delay the capture a few seconds to make sure it's rendered
    setTimeout(async () => {
      let result = await takeSnapshotAsync(this._previewRef, {
        format: 'png',
        result: 'tmpfile',
        quality: 1
      });
      //upload the photo to google photos album
      this.getUploadToken(image)
    }, 1000)
  }

uploadPhoto = (token) => {
fetch('https://photoslibrary.googleapis.com/v1/mediaItems:batchCreate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer '+this.state.accessToken,
      },
      body:JSON.stringify({
        "albumId": this.state.albumId,
        "newMediaItems": [
          {
            "description": "Event Photo",
            "simpleMediaItem": {
              "uploadToken": token
            }
          }
        ]
      })
    })
    .then((response) => {
      console.log('actual upload: ',response)
      this.setState({ ready: true, image: null })
    })
  }

---

我一直在Node Express应用程序中尝试同样的方法。
不要忘记，您需要以二进制格式而不是base64格式上载图像。
看起来您在步骤4中没有将参数传递给函数getUploadToken（）

我的应用程序还返回

“消息”：“非图像：尝试创建此媒体项目时出错。”

在我的节点应用程序中，我使用

---

constfilebinary=file.data.toString（'binary'）

步骤5肯定不起作用。。。你根本没有发送图像

在步骤4中，您将其称为：

this.getUploadToken()

在步骤5中

getUploadToken = (image) => {

然后将图像用作主体

---

测试时是否检查了网络选项卡？看起来您将收到一个400错误。

5 GET UPLOAD TOKEN API works find，只是Google文档中的描述有误。输入是二进制的，而不是Base64。我试过《邮递员》（以下截图）：

获取上载令牌API：

上载媒体：

---

对，这似乎是react native的关键所在，它是以二进制形式获取图像。我知道的唯一方法是使用react native fetch blob，但要使用它，您/我需要分离expo项目（我希望避免）——uploadToken上有一个很好的捕获。您是对的，尽管在我通过映像后问题仍然存在。它与react本机映像二进制文件有关。目前，我正在研究react native fetch blob。谢谢，很好。最后我写了一些粗制滥造的东西，我将用这些重新实现。谢谢。@mbunch很高兴有帮助：）@PramodMali如何上传二进制文件？我有media@cpt.Sparrow请参考以下代码以了解相同的信息：