Google 选择器上传

Question

我正在尝试制作 Google 驱动器的选择器，让我可以将新的本地文件上传到 Google 驱动器。选择器正在工作，它显示我的 Google 驱动器文件，但只有 select 按钮，没有 "upload" 按钮。我添加了视图 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);
  }
}

有什么想法吗？

Answer 1

其余代码在哪里？

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

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

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

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

Content-Type。设置为方法接受的上传媒体数据类型之一，在 API 参考中指定。

Content-Length。设置为您要上传的字节数。如果您使用分块传输编码则不需要。示例：简单上传

以下示例显示了对驱动器 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

Answer 2

您将使用 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();
    }
}

它看起来像这样。

Answer 3

"Upload" 按钮位于您按 "google.picker.Feature.NAV_HIDDEN" 类型隐藏的 "Navigation Pane" 中。

Answer 4

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

不要忘记在以下代码中使用您的开发人员密钥更改 '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

Answer 5

在文档示例中，这一行：

.enableFeature(google.picker.Feature.NAV_HIDDEN)

隐藏 'upload' 选项卡

Google 选择器上传

Google picker upload

javascript

google-picker