Javascript 谷歌选择器上传

我想做一个谷歌驱动器的选择器，让我上传新的本地文件到谷歌驱动器。 选择器正在工作，它正在显示我的谷歌驱动器文件，但只有选择按钮，没有“上传”按钮。我添加了视图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);
  }
}  

---

有什么想法吗？

代码的其余部分在哪里

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

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

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

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

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

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

下面的示例演示如何使用驱动器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数据，您可以添加或更改内容类型

更多信息可在此处找到：

您将使用

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

看起来是这样的。

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

根据我的要求，您必须在代码中添加“上传”视图，我的代码如下所示，这为我启用了上传选项卡：

不要忘了在下面的代码中用开发者密钥更改“开发者密钥”：

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