我正在实施 Kanshi Tanaike 的Web 应用程序代码的可恢复上传并且它有效，但我不完全理解 AJAX 并且正在尝试添加功能。现在代码将新文件放在用户的 Drive 根文件夹中。我想定义一个特定的文件夹并直接上传到那里，或者自动将文件从根目录移动到正确的文件夹（我还需要收集下载链接）。我在响应标头中看到上传函数引用位置，但我正在努力弄清楚如何定义它，并且由于 doUpload() 函数似乎没有将上传视为 File 对象，我不知道如何定义上传后引用它以获取 URL 或移动它。任何反馈将不胜感激。 $('#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();
1 回答
aluckdog
TA贡献1847条经验 获得超7个赞
我相信你的目标和你目前的情况如下。
您要将文件上传到特定文件夹。
您想要检索
webContentLink上传的文件。您想使用Google Apps 脚本使用 Web 应用程序的可恢复上传来实现上述目标
您已经确认存储库中的默认脚本有效。
修改点：
在这种情况下，需要勾选断点续传和Drive API中 “Files: create”的方法。
为了将文件上传到特定的文件夹，请在初始请求的请求正文中添加文件夹ID。
为了返回 的值
webContentLink，请使用fieldsvalue 到初始请求。
将以上几点反映到原稿中，就变成了下面这样。
修改脚本：
在这种情况下，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() {
var folderId = "###"; // Added: Please set the folder ID.
$("#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=*");
xhr.setRequestHeader('Authorization', "Bearer " + at);
xhr.setRequestHeader('Content-Type', "application/json");
xhr.send(JSON.stringify({
mimeType: fileType,
name: fileName,
parents: [folderId] // Added
}));
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 metadata = JSON.parse(xhr.response); // Added
$("#progress").text("Done. Link: " + metadata.webContentLink); // Modified
} 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>
运行上述修改后的脚本时，上传的文件将创建到特定文件夹并webContentLink显示为结果。
添加回答
举报
0/150
提交
取消