如何从谷歌选择器上传获取图像网址

Question

我正在尝试将Google云端硬盘文件选择器用作我网站的文件上传器。我几乎可以正常工作，但是我一直在尝试获取通过选择器上传的图像的图像URL。这是我现在拥有的 JS：

/******************** Google Picker Script ********************/
var developerKey = 'AIzaSyCCKBK236c5tH7pUjHlz485R7Xi-m64EDg', //Browser API key
    clientId = '958305636628-7hvvhnprofn4thnvatdhc7pvucd2efkf.apps.googleusercontent.com', //Client ID
    scope = ['https://www.googleapis.com/auth/photos','https://www.googleapis.com/auth/photos.upload','https://www.googleapis.com/auth/drive.readonly'], //Permission scope
    pickerApiLoaded = false,
    oauthToken;
function onApiLoad() {
        // Use the API Loader script to load google.picker and gapi.auth.
    gapi.load('auth', {'callback': onAuthApiLoad});
    gapi.load('picker', {'callback': onPickerApiLoad});
}
function onAuthApiLoad() {
    window.gapi.auth.authorize({
        'client_id': clientId,
        'scope': scope,
        'immediate': false
    },
    handleAuthResult);
}
function onPickerApiLoad() {
    pickerApiLoaded = true;
    createPicker();
}
function handleAuthResult(authResult) {
    if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
    }
}
function createPicker() {
        // Create and render a Picker object for picking user Photos.
    if (pickerApiLoaded && oauthToken) {
        var picker = new google.picker.PickerBuilder().
        addView(google.picker.ViewId.PHOTOS).
        addView(google.picker.ViewId.PHOTO_UPLOAD).
        addView(google.picker.ViewId.IMAGE_SEARCH).
        addView(google.picker.ViewId.VIDEO_SEARCH).
        addView(google.picker.ViewId.DOCUMENTS).
        setOAuthToken(oauthToken).
        setDeveloperKey(developerKey).
        setCallback(pickerCallback).
        build();
        picker.setVisible(true);
    }
}
function pickerCallback(data) {
    // A simple callback implementation.
    var url = 'nothing';
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        var doc = data[google.picker.Response.DOCUMENTS][0];
        console.log(doc);
        var thumbs = data.docs[0].thumbnails;
        var imageURL = thumbs[thumbs.length - 1].url; //select the largest image returned
    }
    var message = 'You picked: <br/><img src="'+imageURL+'"/>';
    document.getElementById('result').innerHTML = message;
}

正如您在 pickerCallback 函数中看到的那样，它选择了返回的 JSON 数据中最大的图像。但是，这张图片只有 512 像素宽，而我上传的图片要大得多。照片以全分辨率显示在我的Google相册库中，但我找不到以编程方式获取高分辨率版本的方法。下面是选取器在上传后返回的 JSON 数据：

Object {id: "6228330388484160754", serviceId: "picasa", mimeType: "application/vnd.google-apps.photo", name: "20151128_205613.jpg", description: ""…}
description: ""
iconUrl: "https://ssl.gstatic.com/docs/doclist/images/icon_10_generic_list.png"
id: "6228330388484160754"
lastEditedUtc: 1448762173000
mediaKey: "AF1QipMhAlAX4va1MMnOF_yNzYBPFN0eg75xQ12Cu16g"
mimeType: "application/vnd.google-apps.photo"
name: "20151128_205613.jpg"
parentId: "6228330389946890849"
rotation: 0
serviceId: "picasa"
sizeBytes: 2449784
thumbnails: Array[5]
    0: Object
        height: 32
        url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s32-c/20151128_205613.jpg"
        width: 32
    1: Object
        height: 64
        url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s64-c/20151128_205613.jpg"
        width: 64
    2: Object
        height: 72
        url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s72-c/20151128_205613.jpg"
        width: 72
    3: Object
        height: 225
        url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/s400/20151128_205613.jpg"
        width: 400
    4: Object
        height: 288
        url: "https://lh3.googleusercontent.com/-Ngxytft7Pv8/Vm95fT1efPI/AAAAAAAA3gE/_aUFMZAvAxw/20151128_205613.jpg"
        width: 512
length: 5
type: "photo"
url: "https://picasaweb.google.com/101379568166574033142/20151215#6228330388484160754"
version: 56833

还有几件事，数据的"url"部分链接到Picasa Web Albums上更大但仍然不是全分辨率的图片版本。这是图片网址的可靠来源吗？如果是这样，我如何从那里提取网址？

这是我到目前为止所拥有的现场演示。

Answer 1

在函数 createPicker 中使用 DocsView（） 来获取驱动器 url 而不是 picasa url。然后使用访问令牌打开返回的 URL。

这是一个完整的工作示例，其中包含一些额外的可选设置

  function createPicker() {
    if (pickerApiLoaded && oauthToken) {
      var view = new google.picker.DocsView();
      //start on drive root and include folders to avoid the default flat file list
      view.setParent('root');//optional
      view.setIncludeFolders(true);//optional
      var picker = new google.picker.PickerBuilder().
          addView(view).
          addView(google.picker.ViewId.DOCS).
          enableFeature(google.picker.Feature.MULTISELECT_ENABLED).//optional
          enableFeature(google.picker.Feature.NAV_HIDDEN).//optional
          setOAuthToken(oauthToken).
          setCallback(pickerCallback).
          build();
      picker.setVisible(true);
    }
  }

这将向此 https://drive.google.com/file/d/file_id/view?usp=drive_web 返回一个网址 samilar，您可以使用 GET 请求下载该 谷歌 https://developers.google.com/drive/v3/web/manage-downloads#downloading_google_documents

如果你想下载它客户端。可以将回调函数设置为使用返回的文件 ID 和访问令牌进行 blob GET 调用，如下所示。

  function pickerCallback(data) {
          var id = data[google.picker.Response.DOCUMENTS][0].id;//can be a loop if multiselect is enabled
          var accessToken = gapi.auth.getToken().access_token;
          var xhr = new XMLHttpRequest();
          var url = "https://www.googleapis.com/drive/v3/files/" + id + "?alt=media";
          xhr.open('GET', url);
          xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);   
          xhr.responseType = "blob";
          xhr.addEventListener('load', function(e) {
            var blob = this.response;//this is your blob file
          });
          xhr.send();
  }

Answer 2

你不会得到一个可以直接访问的图像 url 来获取你的图像文件，但是你可以使用选取器 API 返回的 id 来获取原始图像，如下所示

GET https://www.googleapis.com/drive/v3/files/0B9jNhSvVjoIVM3dKcGRKRmVIOVU?alt=media
Authorization: Bearer [Your access token]

使用它来获取文件的内容，并使用返回的 mimeType 将其显示为图像

谷歌云端硬盘API指南，其中对此进行了描述