React-Native, Google Фото API Загрузка изображений - PullRequest
0 голосов
/ 16 декабря 2018

реагировать-нативный + экспо

TL; DR: есть ли у кого-нибудь рабочий пример реакции-нативный / экспо, работающий с камерой в приложении и загружающий изображение в «новый»' google api ?

  1. Аутентифицировать пользователя (работает)
  2. Создать альбом (работает)
  3. Сделать альбом общедоступным (работает)
  4. Сделать фотографию (работает)
  5. Получить UploadToken (кажется, что работает)
  6. Загрузить фото (не работает)

Почему, мне кажется, (5) кажется, что оно работает, потому что функция getUploadToken успешно возвращает ответ 200 и предоставляет ключ.

Почему я думаю, что это может быть глупый сервис на другом конце (5), я могу публиковать в нем практически все, и он будет успешно возвращен.

Я догадываюсь, что с этим способом что-то не такЯ загружаю изображение в конечную точку / uploads.

IE: не в правильном формате.

this.state.image == {'base64 ':' base64string ',' uri ':' file: // ... ', ...}

Я вижу, что на моих фотографиях в Google создается альбом, и я вижу, что оннастроен на общий доступ без привилегий (пользователи не могут комментировать или добавлять свои собственные фотографии)

2 MAKE ALBUM

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 MAKE ALBUMПОДЕЛИТЬСЯ

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 GET UPLOAD TOKEN

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

Ответы [ 3 ]

0 голосов
/ 22 декабря 2018

Шаг 5 определенно не работает ... Вы вообще не отправляете изображение!

На шаге 4 вы вызываете это:

this.getUploadToken()

На шаге 5

getUploadToken = (image) => {

изображение затем используется как тело.

Проверяли ли вы вкладку сети во время тестирования?Похоже, вы получили бы ошибку 400.

0 голосов
/ 01 февраля 2019

5 GET UPLOAD TOKEN API работает найти, просто описание неправильно в документации Google.Вместо Base64 вход имеет двоичную форму.Я пробовал в Почтальоне (скриншот ниже):

Получить API загрузки токена: Получить API загрузки токена

Загрузить медиа: введите описание изображения здесь

0 голосов
/ 18 декабря 2018

Я пытался сделать то же самое в приложении Node Express.
Не забывайте, что вам нужно загрузить изображение в двоичном формате, а не в base64.
Похоже, что вы этого не делаетепередать параметр на шаге 4 в функцию getUploadToken ().

Мое приложение также возвращает "message": "NOT_IMAGE: There was an error while trying to create this media item.".

В приложении моего узла я преобразовываю буфер в двоичный файл с

const fileBinary = file.data.toString('binary')

...