Question

我正在尝试制作Google驱动器的选择器，让我可以将新的本地文件上传到Google云端硬盘。选择器正在工作，它显示我的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);
  }
}

有什么想法吗？

Answer 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();
    }
}

看起来像这样。

Answer 2

代码的其余部分在哪里？

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

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

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

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

的Content-Type。设置为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

Answer 3

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

Answer 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中的完整代码

谷歌选择器上传

4 个答案: