Question

我想使用Google Picker API（javascript）从Google Picker回拨所选图片的缩略图网址（多个所选图片）。但结果只有第一个选择的图像（仅1个图像）。有人可以帮我解决这个问题吗？

截图：

以下是我的javascript API：

<!-- START PICKER -->

<button type="button" id="pick">Pick File</button>
    <pre id="fileInfo"></pre>

    <script>
(function() {
    /**
     * Initialise a Google Driver file picker
     */
    var FilePicker = window.FilePicker = function(options) {
        // Config
        this.apiKey = options.apiKey;
        this.clientId = options.clientId;

        // Elements
        this.buttonEl = options.buttonEl;

        // Events
        this.onSelect = options.onSelect;
        this.buttonEl.addEventListener('click', this.open.bind(this));

        // Disable the button until the API loads, as it won't work properly until then.
        this.buttonEl.disabled = true;

        // Load the drive API
        gapi.client.setApiKey(this.apiKey);
        gapi.client.load('drive', 'v2', this._driveApiLoaded.bind(this));
        google.load('picker', '1', { callback: this._pickerApiLoaded.bind(this) });
    }

    FilePicker.prototype = {
        /**
         * Open the file picker.
         */
        open: function() {
            // Check if the user has already authenticated
            var token = gapi.auth.getToken();
            if (token) {
                this._showPicker();
            } else {
                // The user has not yet authenticated with Google
                // We need to do the authentication before displaying the Drive picker.
                this._doAuth(false, function() { this._showPicker(); }.bind(this));
            }
        },

        /**
         * Show the file picker once authentication has been done.
         * @private
         */
        _showPicker: function() {
            var accessToken = gapi.auth.getToken().access_token;
            var view = new google.picker.DocsView();
            view.setIncludeFolders(true);
            this.picker = new google.picker.PickerBuilder()
                .enableFeature(google.picker.Feature.NAV_HIDDEN)
                .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                .addView(google.picker.ViewId.DOCS_IMAGES)
                .setAppId(this.clientId)
                .setDeveloperKey(this.apiKey)
                .setOAuthToken(accessToken)
                .setCallback(this._pickerCallback.bind(this))
                .build()
                .setVisible(true);
        },

        /**
         * Called when a file has been selected in the Google Drive file picker.
         * @private
         */
        _pickerCallback: function(data) {
            if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
                var file = data[google.picker.Response.DOCUMENTS][0],
                    id = file[google.picker.Document.ID],
                    request = gapi.client.drive.files.get({
                        fileId: id
                    });



            request.execute(this._fileGetCallback.bind(this));




            }
        },
        /**
         * Called when file details have been retrieved from Google Drive.
         * @private
         */
        _fileGetCallback: function(file) {
            if (this.onSelect) {
                this.onSelect(file);


            }
        },

        /**
         * Called when the Google Drive file picker API has finished loading.
         * @private
         */
        _pickerApiLoaded: function() {
            this.buttonEl.disabled = false;
        },

        /**
         * Called when the Google Drive API has finished loading.
         * @private
         */
        _driveApiLoaded: function() {
            this._doAuth(true);
        },

        /**
         * Authenticate with Google Drive via the Google JavaScript API.
         * @private
         */
        _doAuth: function(immediate, callback) {
            gapi.auth.authorize({
                client_id: this.clientId,
                scope: 'https://www.googleapis.com/auth/drive.readonly',
                immediate: immediate
            }, callback);
        }

    };
}());
</script>
    <script>
        function initPicker() {
            var picker = new FilePicker({
                apiKey: 'MY_API_KEY',
                clientId: 'MY_CLIENT_ID-0bsroe3tqbfatoiie3h3qvaqtv4q0f5c.apps.googleusercontent.com',
                buttonEl: document.getElementById('pick'),
                onSelect: function(file) {


                    console.log(file);


                    document.getElementById('fileInfo').innerHTML = file.thumbnailLink;
                }
            });
        }
    </script>
<script src="https://www.google.com/jsapi?key=MY_API_KEY"></script>
    <script src="https://apis.google.com/js/client.js?onload=initPicker"></script>

<!-- END PICKER -->

Answer 1

我在您的_pickerCallback方法中看到以下行：

var file = data[google.picker.Response.DOCUMENTS][0]

看起来像是从Google示例中复制的。在这里，您始终只使用所有选定图像的第一张图像。删除[0]，它应该可以工作。

Answer 2

我希望我正确地理解您关注的是您能够选择多个图像，但返回的结果只有一个。如果是，请尝试使用Document.THUMBNAILS。

有了这个，描述照片或视频属性的缩略图数组将位于回调数据的Response.DOCUMENTS字段中。

重要提示：如果挑选的商品属于Google云端硬盘，则不会返回缩略图。

希望有所帮助！

Answer 3

同意@crymis的回答。但是他没有提供完整的解决方案。

这是pickerCallbak函数的代码：

_pickerCallback: function(data) {
    if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
        // get all selected files
        var files = data[google.picker.Response.DOCUMENTS];

        // loop over selected files 
        for (var i = 0; i < files.length; i++) {
            // get file id, and request to get the file
            var id = files[i][google.picker.Document.ID],
                request = gapi.client.drive.files.get({
                    fileId: id
                });

            // execute request for file 
            request.execute(this._fileGetCallback.bind(this));
        }
    }
},

注意：要允许在Google驱动器选择器对话框中进行多项选择，您需要在使用以下方法构建选择器时启用该功能，

.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)

（Kamarul Anuar，您已经做到了，所以不用担心！）

如何从Google Picker API中获取多个选定的图像

3 个答案: