如何将文件夹上传到 Google 驱动器并保持其目录结构？

Question

我正在尝试将文件夹上传到 google 驱动器，同时使用 javascript 驱动器 api 保持其目录结构。我实现了上传所有文件而不是文件夹中的文件夹。我还实现了将一个空文件夹逐个驱动器 api 上传到 google。但是我找不到解释上传文件夹并保持其所有目录结构的资源。例如我有一个这样的文件夹：（我添加了一个 link 来显示我的示例文件夹。由于我的声誉低，我无法添加直接图像。） http://postimg.org/image/h52bvb71v/

但是当我选择文件夹时，我只能上传.txt 文件。至少 google drive api Javascript Quickstart 为我提供了该代码。我不想破坏文件夹的结构，我想将其上传到具有原始结构的驱动器。您知道我如何使用 google 驱动器 api 和 javascript 执行此操作吗？谢谢

这是我的代码。它只上传文件夹内的文件，而不上传文件夹。

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<script type="text/javascript">
    var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxx';
    var SCOPES = 'https://www.googleapis.com/auth/drive';

    /**
     * Called when the client library is loaded to start the auth flow.
     */
    function handleClientLoad() {
        window.setTimeout(checkAuth, 1);
    }

    /**
     * Check if the current user has authorized the application.
     */
    function checkAuth() {
        gapi.auth.authorize(
            { 'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true },
            handleAuthResult);
    }

    /**
     * Called when authorization server replies.
     *
     * @param {Object} authResult Authorization result.
     */
    function handleAuthResult(authResult) {
        var authButton = document.getElementById('authorizeButton');
        var filePicker = document.getElementById('filePicker');
        authButton.style.display = 'none';
        filePicker.style.display = 'none';
        if (authResult && !authResult.error) {
            // Access token has been successfully retrieved, requests can be sent to the API.
            filePicker.style.display = 'block';
            filePicker.onchange = uploadFile;
        } else {
            // No access token could be retrieved, show the button to start the authorization flow.
            authButton.style.display = 'block';
            authButton.onclick = function () {
                gapi.auth.authorize(
                    { 'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': false },
                    handleAuthResult);
            };
        }
    }

    /**
     * Start the file upload.
     *
     * @param {Object} evt Arguments from the file selector.
     */
    function uploadFile(evt) {
        gapi.client.load('drive', 'v2', function () {
            var output = document.getElementById('output');


            var files = evt.target.files; // FileList object

            var totalFiles = files.length; // important

            for (var i = 0; i < totalFiles; i++) {
                var file = evt.target.files[i];
                insertFile(file);
          /*      if (file.isFile) {
                    document.write("OLDUUUUUUU");
                } else if (file.isDirectory) {
                    document.write("haydaaaaa");
                }*/
                console.debug(file.webkitRelativePath);
                output.innerText = output.innerText + file.webkitRelativePath + "\n";
            }

        //    var file = evt.target.files[0];
         //   insertFile(file);
        });
    }

    /**
     * Insert new file.
     *
     * @param {File} fileData File object to read data from.
     * @param {Function} callback Function to call when the request is complete.
     */
    function insertFile(fileData, callback) {
        const boundary = '-------314159265358979323846';
        const delimiter = "\r\n--" + boundary + "\r\n";
        const close_delim = "\r\n--" + boundary + "--";

        var reader = new FileReader();
        reader.readAsBinaryString(fileData);
        reader.onload = function (e) {
            var contentType = fileData.type || 'application/octet-stream';
            var metadata = {
                'title': fileData.name,
                'mimeType': contentType,
                'parents': [{ "id": "0B-WlbPCzbAQpfmhpNXVRWmFlT2daWC1xNEUyQUJEbnViZThYUXVzMFpvdTNuYTc4aDJmb0E" }]
            };

            var base64Data = btoa(reader.result);
            var multipartRequestBody =
                delimiter +
                'Content-Type: application/json\r\n\r\n' +
                JSON.stringify(metadata) +
                delimiter +
                'Content-Type: ' + contentType + '\r\n' +
                'Content-Transfer-Encoding: base64\r\n' +
                '\r\n' +
                base64Data +
                close_delim;

            var request = gapi.client.request({
                'path': '/upload/drive/v2/files',
                'method': 'POST',
                'params': { 'uploadType': 'multipart' },
                'headers': {
                    'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
                },
                'body': multipartRequestBody
            });

         /*   var request = gapi.client.request({
                'path': '/drive/v2/files',
                'method': 'POST',
                'params': { 'uploadType': 'multipart' },
                'body': {
                    "title": "cat",
                    "mimeType": "application/vnd.google-apps.folder",
                    "description": "Some"
                }
            });*/

            if (!callback) {
                callback = function (file) {
                    console.log(file)
                };
            }
            request.execute(callback);
        }
    }

</script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
</head>
<body>
 <!--Add a file picker for the user to start the upload process 
     <input type="file" name="files[]" multiple directory webkitdirectory mozdirectory>
    -->
 <div>
    <input type="file" id="filePicker" multiple directory webkitdirectory mozdirectory />
    <input type="button" id="authorizeButton" style="display: none" value="Authorize" />
</div>      
<div id="output"></div>

Answer 1

api 不支持你想要的。然而，正如您发现的那样，您可以创建空文件夹。然后递归创建所需的文件夹并将文件上传到其中。

如何将文件夹上传到 Google 驱动器并保持其目录结构？

How can I upload a folder to Google Drive with keeping its directory structure?

javascript

file-upload

google-drive-api