Question

使用与Google Drive一起使用的工具，并且一项操作要求我们有两个文件选择器并对其结果进行操作。这是一个“移动”操作，因此第一个是选择要移动的文件，第二个是将文件移动到的文件夹。我已经将两个选择器定义如下：

btn_driveMove.on('click', (e) => {
        console.log('btn_driveMove(): called.');
        let tk = getLayeredStorage(currentUserEmail, 'access_token');
        if(tk.indexOf('\\') !== -1) tk = tk.replace(/\\/g,'');
        if(tk.indexOf('\"') !== -1) tk = tk.replace(/"/g, '');

        gapi.client.setToken({access_token: tk});

        gapi.load('picker', () => {
        const selectFile = new google.picker.PickerBuilder()
                .addView(new google.picker.DocsView().setSelectFolderEnabled(true))
                .setOAuthToken(gapi.client.getToken().access_token)
                .setCallback(fileSelectedCallback)
                .build();
        selectFile.setVisible(true);
    });

});

function folderSelectedCallback(folderData, fileData) {
    console.log('folderSelectedCallback(): called.');
    console.log('File Data: ', fileData);
    console.log('Folder Data: ', folderData);
    const files = fileData.docs;
    const folder = folderData.docs[0];

    files.forEach(f => {
        gapi.client.drive.files.update({
            addParents: folder.id,
            fileId: f.id,
            removeParents: f.parentId
        }).then(res => {
            console.dir(res);
        });
    });
}

function fileSelectedCallback(fileData) {
    console.log('FileSelectedCallback(): File Data: ', fileData);
    const folderPicker = new google.picker.PickerBuilder()
            .addView(new google.picker.DocsView()
                            .setIncludeFolders(true)
                            .setMimeTypes('application/vnd.google-apps.folder')
                            .setSelectFolderEnabled(true))
            .setOAuthToken(gapi.client.getToken().access_token)
            .setCallback((data) => folderSelectedCallback(data, fileData))
            .build();
    folderPicker.setVisible(true);
}

问题在于，有时文件夹选择器会显示在文件选择器的顶部。该代码仍然可以正常工作，但是看到两个选择器弹出，关闭一个选择器，在另一个选择器中选择一个文件，然后一个文件夹又回来了，看起来很糟糕。只是我不希望这种呈现方式...

Answer 1

在.setCallback()中设置的回调不仅会被调用一次，而且每次Picker都会发生变化。这旨在允许开发人员为Picker工作流程中的某些事件设置特定的操作。

恰当的例子是，'cancelled'中存储的'loaded'或data.action操作实际上并不需要做任何事情。我们感兴趣的是'picked'。这意味着用户已在选择器中选择了某些内容。（文件，文件夹，友好的外星人等）

我们只需要使用一个简单的if语句来包装回调处理程序的主体，如下所示：

function pickerCallback(data){
    if(data.action === 'picked'){
        ....... do some things ......
    }
}

有了这个，第一个回调应该看起来像这样，并确保第二个选择器在使用/配置第一个选择器之前不显示。

function fileSelectedCallback(fileData) {
    console.log('FileSelectedCallback(): File Data: ', fileData);
    if(fileData.action === 'picked'){
        const folderPicker = new google.picker.PickerBuilder()
                .addView(new google.picker.DocsView()
                                .setIncludeFolders(true)
                                .setMimeTypes('application/vnd.google-apps.folder')
                                .setSelectFolderEnabled(true))
                .setOAuthToken(gapi.client.getToken().access_token)
                .setCallback((data) => folderSelectedCallback(data, fileData))
                .build();
        folderPicker.setVisible(true);
    }
}

Google Picker API多个选择器发生冲突

1 个答案: