javascript - 如何在谷歌选择器中显示缩略图？

Question

我正在使用谷歌选择器。

但在选择器视图中，图像缩略图未显示。但我想在预览中显示缩略图。但我不能。我正在尝试这个：

这是我的代码：

<script type="text/javascript">

    var developerKey = "";
    var clientId = "";

    var scope = ['https://www.googleapis.com/auth/drive.file'];

    var pickerApiLoaded = false;
    var oauthToken;

    // Use the API Loader script to load google.picker and gapi.auth.
    function onApiLoad {
        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() {
        if (pickerApiLoaded && oauthToken) {
            var view = new google.picker.DocsView().setParent('root').setIncludeFolders(true)
            var uploadView = new google.picker.DocsUploadView().setIncludeFolders(true);

            view.setMimeTypes('image/png,image/jpeg,image/jpg');
            uploadView.setMimeTypes('image/png,image/jpeg,image/jpg');

            var picker = new google.picker.PickerBuilder().
                    addView(view).
                    addView(uploadView).
                    setOAuthToken(oauthToken).
                    setDeveloperKey(developerKey).
                    setCallback(pickerCallback).
                    build();
            picker.setVisible(true);
            setTimeout(function () {
                $('.picker-dialog').css('z-index', 10002);
            }, 10);
        }
    }

    function pickerCallback(data) {
        if (data.action == google.picker.Action.PICKED) {
            var fileId = data.docs[0].id;
            alert('You select: ' + fileId);
        }
    }
</script>

选择器选择文件模式显示如下：

但我想要这样：

标签： javascriptfile-uploadgoogle-picker

Answer 1

回答：

您需要使用drive.readonly范围而不是drive.file.

更多信息：

根据 OAuth 同意屏幕中的授权信息，drive.file范围将允许您的应用程序：

• 查看您使用此应用打开或公开共享的 Google 云端硬盘中的文件

• 保存对您使用此应用打开的文件的更改

• 使用此应用在 Google Drive 中创建新文件

• 查看您使用此应用打开的 Google 云端硬盘中的文件夹及其内容

• 更改您使用此应用程序打开的文件夹及其内容

• 删除您使用此应用打开的文件夹的内容

而drive.readonly范围允许您的应用程序：

• 查看您的 Google 云端硬盘文件
• 下载您的文件
• 查看与您共享文件的人的姓名和电子邮件

这里的重要区别是drive.file范围将您的应用程序限制为已使用该应用程序创建 或 已使用该应用程序打开的文件。没有readonly范围，就无法检索缩略图信息。

注意：显然，这确实改变了您的应用程序可以执行的范围，这将反映在向用户显示的 OAuth 同意屏幕中。