Question

反应原生+博览会

TL; DR：是否有人有使用本机内置相机进行react-native / expo的工作示例，并将图像上传到“新” google api？

验证用户身份（工作中）
Make Album（正在工作）
Make Album Shareable（正在工作）
拍照（工作）
Get UploadToken（似乎正在运行）
Upload Photo（不起作用）

为什么我认为（5）似乎可行，因为getUploadToken函数成功返回，响应200，并提供了一个密钥。

为什么我认为（5）的另一端可能是愚蠢的服务，所以我几乎可以在其中发布任何内容，并且它会成功返回。

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

IE：格式不正确。

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

我确实看到在我的Google照片中创建了一个相册，并且可以看到该相册被设置为可共享的，没有特权（用户无法评论或添加自己的照片）

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)
  }

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张上传照片

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 })
    })
  }

Answer 1

5 GET UPLOAD TOKEN API可以找到，只是Google文档上的描述错误。输入不是Bin64，而是二进制形式。我已经在试图邮差（下图）：

获取上传令牌API： Get Upload Token API

上传媒体： enter image description here

Answer 2

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

我的应用还返回了u。

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

将缓冲区转换为二进制文件

"message": "NOT_IMAGE: There was an error while trying to create this media item."

Answer 3

第5步肯定不起作用...您根本没有发送图像！

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

this.getUploadToken()

在第5步中

getUploadToken = (image) => {

然后将图像用作主体。

您在测试时是否检查了网络标签？看来您会收到400错误。

React-Native，Google Photos API图片上传

3 个答案: