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

我想使用GooglePickerAPI（javascript）从GooglePicker调用选定图像（多个选定图像）的缩略图URL。但结果仅为第一个选定图像（仅1个图像）。有人能帮我解决这个问题吗

屏幕截图：

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

下面是我的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 -->

拾取文件
（功能（）{
/**
*初始化Google驱动程序文件选择器
*/
var FilePicker=window.FilePicker=function（选项）{
//配置
this.apiKey=options.apiKey；
this.clientId=options.clientId；
//元素
this.buttonEl=options.buttonEl；
//事件
this.onSelect=options.onSelect；
this.buttonEl.addEventListener（'click'，this.open.bind（this））；
//在加载API之前禁用该按钮，因为在此之前它将无法正常工作。
this.buttonEl.disabled=true；
//加载驱动器API
gapi.client.setApiKey（this.apiKey）；
gapi.client.load（'drive'，'v2'，this.\u driveapiloadded.bind（this））；
load（'picker'，'1'，{callback:this.\u pickeraproaded.bind（this）}）；
}
FilePicker.prototype={
/**
*打开文件选择器。
*/
打开：函数（）{
//检查用户是否已通过身份验证
var token=gapi.auth.getToken（）；
如果（令牌）{
这个；
}否则{
//该用户尚未通过谷歌的身份验证
//我们需要在显示驱动器选择器之前进行身份验证。
this._doAuth（false，function（）{this._showPicker（）；}.bind（this））；
}
},
/**
*身份验证完成后显示文件选择器。
*@私人
*/
_showPicker:函数（）{
var accessToken=gapi.auth.getToken（）.access\u token；
var view=new google.picker.DocsView（）；
view.setIncludeFolders（真）；
this.picker=new google.picker.PickerBuilder（）
.enableFeature（google.picker.Feature.NAV_隐藏）
.enableffeature（google.picker.Feature.MULTISELECT\u已启用）
.addView（google.picker.ViewId.DOCS\u图像）
.setAppId（this.clientId）
.setDeveloperKey（this.apiKey）
.setOAuthToken（accessToken）
.setCallback（this.\u pickerCallback.bind（this））
.build（）
.setVisible（true）；
},
/**
*在Google Drive文件选择器中选择文件时调用。
*@私人
*/
_pickerCallback：函数（数据）{
if（数据[google.picker.Response.ACTION]==google.picker.ACTION.PICKED）{
var file=data[google.picker.Response.DOCUMENTS][0]，
id=文件[google.picker.Document.id]，
request=gapi.client.drive.files.get({
fileId:id
});
request.execute（this.\u fileGetCallback.bind（this））；
}
},
/**
*从Google Drive检索文件详细信息时调用。
*@私人
*/
_fileGetCallback:函数（文件）{
if（this.onSelect）{
此.onSelect（文件）；
}
},
/**
*当Google驱动器文件选择器API完成加载时调用。
*@私人
*/
_pickeraproaded:function（）{
this.buttonEl.disabled=false；
},
/**
*当GoogleDrive API完成加载时调用。
*@私人
*/
_driveApiLoaded:函数（）{
这是真的；
},
/**
*通过Google JavaScript API向Google Drive进行身份验证。
*@私人
*/
_doAuth：函数（立即、回调）{
gapi.auth.authorize({
客户id:this.clientId，
范围：'https://www.googleapis.com/auth/drive.readonly',
立即的：立即的
}，回调）；
}
};
}());
函数initPicker（）{
var picker=新文件选择器({
apiKey:“我的API密钥”，
clientId:“我的客户ID-0BSROE3TQBFATOIIE3QVAQTV4Q0F5C.apps.googleusercontent.com”，
Buttonnel:document.getElementById（'pick'），
onSelect：函数（文件）{
console.log（文件）；
document.getElementById（'fileInfo'）.innerHTML=file.thumbnailLink；
}
});
}

我希望我正确理解了您的顾虑，即您可以选择多个图像，但返回的结果只有一个。如果是，请尝试使用

这样，一组描述照片或视频属性的缩略图将出现在回调数据的字段中

重要提示：如果拾取的项目属于Google Drive，则不会返回缩略图

---

希望有帮助

我在您的

\u pickerCallback

方法中看到这一行：

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

看起来像是从Google示例中复制的。在这里，您始终只使用所有选定图像的第一个图像。

---

删除

[0]

，它应该会工作。

同意@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));
        }
    }
},

---

（Kamarul Anuar，你已经这么做了，所以别担心！）

谢谢你的回答，你能提供，如何用这个修改我的代码吗？我迷路了