如何在 google 选择器中显示缩略图？

Question

我正在使用 google 选择器。

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

这是我的代码：

<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>

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

但我想要这样：

Answer 1

答案：

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

更多信息：

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

• View files from Google Drive that you have opened with this app or that are shared publicly

• Save changes to files that you have opened with this app

• Create new files in Google Drive using this app

• View folders and their contents from Google Drive that you have opened with this app

• Make changes to folders and their contents that you have opened with this app

• Delete contents of folders that you have opened with this app

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

• See your Google Drive files
• Download your files
• See the names and emails of people you share files with

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

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