谷歌选择器上传答案

【问题标题】：Google picker upload谷歌选择器上传
【发布时间】：2021-12-06 16:28:18
【问题描述】：

我正在尝试制作一个谷歌驱动器的选择器，让我可以将新的本地文件上传到谷歌驱动器。选择器正在工作，它显示我的 Google Drive 文件，但只有选择按钮，没有“上传”按钮。我添加了视图 google.picker.DocsUploadView() 但仍然不是按钮。

这是我的 createPicker 函数：

function createPicker() {
  if (pickerApiLoaded && oauthToken) {
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    var picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(appId)
        .setOAuthToken(oauthToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(developerKey)
        .setCallback(pickerCallback)
        .build();
     picker.setVisible(true);
  }
}

有什么想法吗？

【问题讨论】：

标签： javascript google-picker

【解决方案1】：

您将使用DocsUploadView。

在你的 createPicker 代码中使用它：

function createPicker() {
    // Create a view to search images.
    var view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes('image/png,image/jpeg');

    // Use DocsUploadView to upload documents to Google Drive.
    var uploadView = new google.picker.DocsUploadView();

    var picker = new google.picker.PickerBuilder().
        addView(view).
        addView(uploadView).
        setAppId(appId).
        setOAuthToken(oauthToken).
        setCallback(pickerCallback).
        build();
    picker.setVisible(true);
}

 // A simple callback implementation.
function pickerCallback(data) {
    if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        alert('The user selected: ' + fileId);
        createPicker();
    }
}

它看起来像这样。

【讨论】：

【解决方案2】：

剩下的代码在哪里？

上传文件最直接的方法是发出一个简单的上传请求。在以下情况下，此选项是一个不错的选择：

如果连接失败，文件足够小，可以再次完整上传。没有要发送的元数据。如果您计划在单独的请求中发送此资源的元数据，或者不支持或不可用元数据，这可能是正确的。要使用简单上传，请向方法的 /upload URI 发出 POST 或 PUT 请求，并添加查询参数 uploadType=media。例如：

POST https://www.googleapis.com/upload/drive/v3/files?uploadType=media

发出简单上传请求时使用的 HTTP 标头包括：

内容类型。设置为 API 参考中指定的方法可接受的上传媒体数据类型之一。

内容长度。设置为您要上传的字节数。如果您使用分块传输编码，则不需要。示例：简单上传

以下示例显示了对 Drive API 的简单上传请求的使用。

POST /upload/drive/v3/files?uploadType=media HTTP/1.1

Host: www.googleapis.com

Content-Type: image/jpeg

Content-Length: number_of_bytes_in_file

Authorization: Bearer your_auth_token

以上是JPEG数据，您可以添加或更改内容类型。

更多信息可以在这里找到：https://developers.google.com/drive/v3/web/manage-uploads#simple

【讨论】：

【解决方案3】：

“上传”按钮位于您通过“google.picker.Feature.NAV_HIDDEN”类型隐藏的“导航窗格”中。

【讨论】：

【解决方案4】：

根据我和Google Docs 的说法，您必须在代码中添加“上传”视图，我的代码如下，它为我启用了上传选项卡：

不要忘记在以下代码中使用您的开发者密钥更改“YOUR_DEVELOPER_KEY_HERE”：

const googleViewId = google.picker.ViewId.DOCS;

/*code to create obj of DocsUploadView for upload*/
const uploadView = new google.picker.DocsUploadView();

const docsView = new google.picker.DocsView(googleViewId)
                    .setIncludeFolders(true)
                    .setSelectFolderEnabled(true);

const picker = new window.google.picker.PickerBuilder()
                .enableFeature(google.picker.Feature.SIMPLE_UPLOAD_ENABLED)
                  .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .addView(docsView)
                    .addView(uploadView) /*DocsUploadView added*/
                    .setOAuthToken(oauthToken)
                    .setDeveloperKey('YOUR_DEVELOPER_KEY_HERE')
                    .setCallback((data)=>{
                      if (data.action == google.picker.Action.PICKED) {
                          var fileId = data.docs[0].id;
                          alert('The user selected: ' + fileId);
                          picker();
                      }
                    });
picker.build().setVisible(true);

这就是它的样子 ;) React 中的完整代码check this link

【讨论】：

【解决方案5】：

在文档示例中，这一行：

.enableFeature(google.picker.Feature.NAV_HIDDEN)

隐藏“上传”标签

【讨论】：