javascript 有上传的文件登陆到一个特定的文件夹，并获得上传文件的网址(所有在谷歌驱动器)

guz6ccqo  于 2023-01-07  发布在  Java
关注(0)|答案(1)|浏览(127)

所以伙计们，我有这个上传表单，是在谷歌应用程序脚本。上传工作刚刚好，他们是在驱动器成功登陆后上传。
我需要的文件降落在某个文件夹让我们说“folderX”，并在上传完成后，我希望它返回一个网址的项目内的驱动器（用于编辑目的或管理... idk）。
如果这不工作或不能工作，我需要它被上传到一个数据库，让我们说数据库名称是dbupload，表名称是dbuploadtable，它有id，name，url。
下面是我的index.html：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <title>Resumable upload for Web Apps</title>
</head>

<body>
    <form>
        <input name="file" id="uploadfile" type="file">
    </form>
    <div id="progress"></div>

<script>
    const chunkSize = 5242880;

    $('#uploadfile').on("change", function() {
        var file = this.files[0];
        if (file.name != "") {
            var fr = new FileReader();
            fr.fileName = file.name;
            fr.fileSize = file.size;
            fr.fileType = file.type;
           fr.onload = init;
            fr.readAsArrayBuffer(file);
        }
    });

    function init() {
        $("#progress").text("Initializing.");
        var fileName = this.fileName;
        var fileSize = this.fileSize;
        var fileType = this.fileType;
        console.log({fileName: fileName, fileSize: fileSize, fileType: fileType});
        var buf = this.result;
        var chunkpot = getChunkpot(chunkSize, fileSize);
        var uint8Array = new Uint8Array(buf);
        var chunks = chunkpot.chunks.map(function(e) {
            return {
                data: uint8Array.slice(e.startByte, e.endByte + 1),
                length: e.numByte,
                range: "bytes " + e.startByte + "-" + e.endByte + "/" + chunkpot.total,
            };
        });
            google.script.run.withSuccessHandler(function(at) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable");
            xhr.setRequestHeader('Authorization', "Bearer " + at);
            xhr.setRequestHeader('Content-Type', "application/json");
            xhr.send(JSON.stringify({
            mimeType: fileType,
            name: fileName,
            }));
            xhr.onload = function() {
                doUpload({
                    location: xhr.getResponseHeader("location"),
                    chunks: chunks,
                });
            };
            xhr.onerror = function() {
                console.log(xhr.response);
            };
        }).getAt();
    }

function doUpload(e) {
    var chunks = e.chunks;
    var location = e.location;
    var cnt = 0;
    var end = chunks.length;
    var temp = function callback(cnt) {
        var e = chunks[cnt];
        var xhr = new XMLHttpRequest();
        xhr.open("PUT", location, true);
        xhr.setRequestHeader('Content-Range', e.range);
        xhr.send(e.data);
        xhr.onloadend = function() {
            var status = xhr.status;
            cnt += 1;
            console.log("Uploading: " + status + " (" + cnt + " / " + end + ")");
            $("#progress").text("Uploading: " + Math.floor(100 * cnt / end) + "%");
            if (status == 308) {
                callback(cnt);
            } else if (status == 200) {
                $("#progress").text("Done.");
            } else {
                $("#progress").text("Error: " + xhr.response);
            }
        };
    }(cnt);
}

function getChunkpot(chunkSize, fileSize) {
    var chunkPot = {};
    chunkPot.total = fileSize;
    chunkPot.chunks = [];
    if (fileSize > chunkSize) {
        var numE = chunkSize;
        var endS = function(f, n) {
            var c = f % n;
            if (c == 0) {
                return 0;
            } else {
                return c;
            }
        }(fileSize, numE);
        var repeat = Math.floor(fileSize / numE);
        for (var i = 0; i <= repeat; i++) {
            var startAddress = i * numE;
            var c = {};
            c.startByte = startAddress;
            if (i < repeat) {
                c.endByte = startAddress + numE - 1;
                c.numByte = numE;
                chunkPot.chunks.push(c);
            } else if (i == repeat && endS > 0) {
                c.endByte = startAddress + endS - 1;
                c.numByte = endS;
                chunkPot.chunks.push(c);
            }
        }
    } else {
        var chunk = {
            startByte: 0,
            endByte: fileSize - 1,
            numByte: fileSize,
        };
        chunkPot.chunks.push(chunk);
    }
    return chunkPot;
}
</script>
</body>

</html>

这是我的code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile("index.html");
}

function getAt() {
  return ScriptApp.getOAuthToken();
}

// This commented line is used for enabling Drive API and adding a scope
"https://www.googleapis.com/auth/drive".
// So please don't remove this.
// DriveApp.createFile();

index.html（根据以下建议进行编辑; Code.gs是相同的）：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <title>Resumable upload for Web Apps</title>
</head>

<body>
    <form>
        <input name="file" id="uploadfile" type="file">
    </form>
    <div id="progress"></div>

<script>
    const chunkSize = 5242880;

    $('#uploadfile').on("change", function() {
        var file = this.files[0];
        if (file.name != "") {
            var fr = new FileReader();
            fr.fileName = file.name;
            fr.fileSize = file.size;
            fr.fileType = file.type;
           fr.onload = init;
            fr.readAsArrayBuffer(file);
        }
    });

    function init() {
        $("#progress").text("Initializing.");
        var fileName = this.fileName;
        var fileSize = this.fileSize;
        var fileType = this.fileType;
        console.log({fileName: fileName, fileSize: fileSize, fileType: fileType});
        var buf = this.result;
        var chunkpot = getChunkpot(chunkSize, fileSize);
        var uint8Array = new Uint8Array(buf);
        var chunks = chunkpot.chunks.map(function(e) {
            return {
                data: uint8Array.slice(e.startByte, e.endByte + 1),
                length: e.numByte,
                range: "bytes " + e.startByte + "-" + e.endByte + "/" + chunkpot.total,
            };
        });
            google.script.run.withSuccessHandler(function(at) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable&fields=mimeType%2Cid%2Cname%2CwebViewLink%2Cparents");
            xhr.setRequestHeader('Authorization', "Bearer " + at);
            xhr.setRequestHeader('Content-Type', "application/json");
            xhr.send(JSON.stringify({
                mimeType: fileType,
                name: fileName,
                parents: ["1xs9T_RfqZBS4i2JquCzy7qwumvrbPX4G"] // Please set the folder ID of the folder you want to upload.}));
            xhr.onload = function() {
                doUpload({
                    location: xhr.getResponseHeader("location"),
                    chunks: chunks,
                });
            };
            xhr.onerror = function() {
                console.log(xhr.response);
            };
        }).getAt();
    }

function doUpload(e) {
    var chunks = e.chunks;
    var location = e.location;
    var cnt = 0;
    var end = chunks.length;
    var temp = function callback(cnt) {
        var e = chunks[cnt];
        var xhr = new XMLHttpRequest();
        xhr.open("PUT", location, true);
        xhr.setRequestHeader('Content-Range', e.range);
        xhr.send(e.data);
        xhr.onloadend = function() {
            var status = xhr.status;
            cnt += 1;
            console.log("Uploading: " + status + " (" + cnt + " / " + end + ")");
            $("#progress").text("Uploading: " + Math.floor(100 * cnt / end) + "%");
            if (status == 308) {
                callback(cnt);
            } else if (status == 200) {
        var obj = JSON.parse(xhr.response);
        var url = obj.webViewLink;
        console.log(url);
        $("#progress").text(url);
    } else {
                $("#progress").text("Error: " + xhr.response);
            }
        };
    }(cnt);
}

function getChunkpot(chunkSize, fileSize) {
    var chunkPot = {};
    chunkPot.total = fileSize;
    chunkPot.chunks = [];
    if (fileSize > chunkSize) {
        var numE = chunkSize;
        var endS = function(f, n) {
            var c = f % n;
            if (c == 0) {
                return 0;
            } else {
                return c;
            }
        }(fileSize, numE);
        var repeat = Math.floor(fileSize / numE);
        for (var i = 0; i <= repeat; i++) {
            var startAddress = i * numE;
            var c = {};
            c.startByte = startAddress;
            if (i < repeat) {
                c.endByte = startAddress + numE - 1;
                c.numByte = numE;
                chunkPot.chunks.push(c);
            } else if (i == repeat && endS > 0) {
                c.endByte = startAddress + endS - 1;
                c.numByte = endS;
                chunkPot.chunks.push(c);
            }
        }
    } else {
        var chunk = {
            startByte: 0,
            endByte: fileSize - 1,
            numByte: fileSize,
        };
        chunkPot.chunks.push(chunk);
    }
    return chunkPot;
}
</script>
</body>

</html>
JavaScript

1条答案

按热度按时间
abithluo

abithluo1#

我相信你的目标如下。

  • 您希望将文件上载到特定文件夹，并希望返回上载文件的URL。

从您显示的脚本中，如果您在https://github.com/tanaikech/Resumable_Upload_For_WebApps中使用my script，当您想将文件上载到特定文件夹时，下面的修改如何？

修改的脚本：

请按如下方式修改init()。

发件人：
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable");
xhr.setRequestHeader('Authorization', "Bearer " + at);
xhr.setRequestHeader('Content-Type', "application/json");
xhr.send(JSON.stringify({
mimeType: fileType,
name: fileName,
}));
收件人：
var xhr = new XMLHttpRequest();
xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable&fields=mimeType%2Cid%2Cname%2CwebViewLink%2Cparents");
xhr.setRequestHeader('Authorization', "Bearer " + at);
xhr.setRequestHeader('Content-Type', "application/json");
xhr.send(JSON.stringify({
    mimeType: fileType,
    name: fileName,
    parents: ["###folderID###"] // Please set the folder ID of the folder you want to upload.
}));

并且，请按如下方式修改doUpload(e)。

发件人：
} else if (status == 200) {
    $("#progress").text("Done.");
} else {
收件人：
} else if (status == 200) {
    var obj = JSON.parse(xhr.response);
    var url = obj.webViewLink;
    console.log(url);
    $("#progress").text(url);
} else {
  • 通过此修改，文件将上载到特定文件夹并返回webViewLink。

注：

参考文献：

添加：

以下脚本是我测试过的脚本。在使用此脚本之前，请将文件夹ID设置为parents: ["### folder ID ###"]。

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <title>Resumable upload for Web Apps</title>
</head>

<body>
    <form>
        <input name="file" id="uploadfile" type="file">
    </form>
    <div id="progress"></div>

<script>
    const chunkSize = 5242880;

    $('#uploadfile').on("change", function() {
        var file = this.files[0];
        if (file.name != "") {
            var fr = new FileReader();
            fr.fileName = file.name;
            fr.fileSize = file.size;
            fr.fileType = file.type;
            fr.onload = init;
            fr.readAsArrayBuffer(file);
        }
    });

    function init() {
        $("#progress").text("Initializing.");
        var fileName = this.fileName;
        var fileSize = this.fileSize;
        var fileType = this.fileType;
        console.log({fileName: fileName, fileSize: fileSize, fileType: fileType});
        var buf = this.result;
        var chunkpot = getChunkpot(chunkSize, fileSize);
        var uint8Array = new Uint8Array(buf);
        var chunks = chunkpot.chunks.map(function(e) {
            return {
                data: uint8Array.slice(e.startByte, e.endByte + 1),
                length: e.numByte,
                range: "bytes " + e.startByte + "-" + e.endByte + "/" + chunkpot.total,
            };
        });
        google.script.run.withSuccessHandler(function(at) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable&fields=mimeType%2Cid%2Cname%2CwebViewLink%2Cparents");
            xhr.setRequestHeader('Authorization', "Bearer " + at);
            xhr.setRequestHeader('Content-Type', "application/json");
            xhr.send(JSON.stringify({
                mimeType: fileType,
                name: fileName,
                parents: ["### folder ID ###"] // <--- Please set your folder ID.
            }));
            xhr.onload = function() {
                doUpload({
                    location: xhr.getResponseHeader("location"),
                    chunks: chunks,
                });
            };
            xhr.onerror = function() {
                console.log(xhr.response);
            };
        }).getAt();
    }

    function doUpload(e) {
        var chunks = e.chunks;
        var location = e.location;
        var cnt = 0;
        var end = chunks.length;
        var temp = function callback(cnt) {
            var e = chunks[cnt];
            var xhr = new XMLHttpRequest();
            xhr.open("PUT", location, true);
            xhr.setRequestHeader('Content-Range', e.range);
            xhr.send(e.data);
            xhr.onloadend = function() {
                var status = xhr.status;
                cnt += 1;
                console.log("Uploading: " + status + " (" + cnt + " / " + end + ")");
                $("#progress").text("Uploading: " + Math.floor(100 * cnt / end) + "%");
                if (status == 308) {
                    callback(cnt);
                } else if (status == 200) {
                    var obj = JSON.parse(xhr.response);
                    var url = obj.webViewLink;
                    console.log(url);
                    $("#progress").text(url);
                } else {
                    $("#progress").text("Error: " + xhr.response);
                }
            };
        }(cnt);
    }

    function getChunkpot(chunkSize, fileSize) {
        var chunkPot = {};
        chunkPot.total = fileSize;
        chunkPot.chunks = [];
        if (fileSize > chunkSize) {
            var numE = chunkSize;
            var endS = function(f, n) {
                var c = f % n;
                if (c == 0) {
                    return 0;
                } else {
                    return c;
                }
            }(fileSize, numE);
            var repeat = Math.floor(fileSize / numE);
            for (var i = 0; i <= repeat; i++) {
                var startAddress = i * numE;
                var c = {};
                c.startByte = startAddress;
                if (i < repeat) {
                    c.endByte = startAddress + numE - 1;
                    c.numByte = numE;
                    chunkPot.chunks.push(c);
                } else if (i == repeat && endS > 0) {
                    c.endByte = startAddress + endS - 1;
                    c.numByte = endS;
                    chunkPot.chunks.push(c);
                }
            }
        } else {
            var chunk = {
                startByte: 0,
                endByte: fileSize - 1,
                numByte: fileSize,
            };
            chunkPot.chunks.push(chunk);
        }
        return chunkPot;
    }
</script>
</body>

</html>
赞(0）分享  回复(0）举报  2023-01-07
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com