javascript - 如何从 Google Picker API 获取多张选中的图片

Question

我想使用 Google Picker API (javascript) 从 Google Picker 回调所选图像(多选图像)的缩略图 URL。但结果只有第一个选择的图像(只有 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]，它应该可以工作。