Im Grunde ist die Aufgabe also sehr einfach, aber ich habe keine praktikable Lösung für mein Problem gefunden. Ich habe ein riesiges Upload-Skript auf meiner Website (derzeit localhost), aber reduzieren wir die Komplexität auf das Notwendige.
Das Problem ist nun, dass ich das Formular bereits auf meiner Website habe und das Formular nicht als zusätzliches HTML in script.google.com haben möchte, sondern meine Benutzereingaben an Google App Script übertragen und dann hochladen möchte Wenn ich auf Google Drive gehe und die URL zu meiner Website zurückgebe, kann ich sie in einer Variable speichern.
Mein Problem ist jetzt, dass ich nicht alles zusammenfassen kann.
Das ist das Formular auf meiner Website (vereinfacht):
<form name="myForm" method="post">
<!-- <form name="first-form"> -->
<input type="text" placeholder="Name" id="myName">
<input type="file" name="myFile" id="myFile">
<button onclick="UploadFile()" type="submit">submit</button>
</form>
Wie lade ich meine Informationen in Google Drive hoch und erhalte die Ergebnisse? Wie kann ich Daten von Google App Script übertragen, ohne iFrames oder etwas anderes zu verwenden?
Danke!
**** Funktionierendes Beispiel, wenn HTML in script.google.com ****
ist
GS
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Google File Upload by CTRLQ.org");
}
function uploadFileToGoogleDrive(data, file, name, email) {
try {
var dropbox = "Received Files";
var folder, folders = DriveApp.getFoldersByName(dropbox);
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob);
return "OK";
} catch (f) {
return f.toString();
}
}
html in apps.googlescript
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google File Upload by CTRLQ.org</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<style>
.disclaimer{width: 480px; color:#646464;margin:20px auto;padding:0 16px;text-align:center;font:400 12px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
</head>
<body>
<!-- Written by Amit Agarwal amit@labnol.org -->
<form class="main" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">Upload Files to my Google Drive</h5>
<p class="disclaimer">This <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">File Upload Form</a> (<a href="https://youtu.be/C_YBBupebvE">tutorial</a>) is powered by <a href="https://ctrlq.org/code/19747-google-forms-upload-files" target="_blank">Google Scripts</a></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="name" type="text" name="Name" class="validate" required="" aria-required="true">
<label for="name">Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" name="Email" class="validate" required="" aria-required="true">
<label for="email">Email Address</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>File</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Select a file on your computer">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onclick="submitForm(); return false;">Submit</button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">File Uploaded</h5>
<p>Your file has been successfully uploaded.</p>
<p>The <a href="http://www.labnol.org/internet/file-upload-google-forms/29170/">pro version</a> (see <a href="">demo form</a>) includes a visual drag-n-drop form builder, CAPTCHAs, the form responses are saved in a Google Spreadsheet and respondents can upload multiple files of any size.</p>
<p class="center-align"><a class="btn btn-large" href="https://gum.co/GA14?wanted=true" target="_blank">Upgrade to Pro</a></p>
</div>
</form>
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large red">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
<li><a class="btn-floating blue" href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
<li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script>
var file,
reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
} else {
showError(e);
}
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Please select a file to upload");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. Please <a href='http://www.labnol.org/internet/file-upload-google-forms/29170/' target='_blank'>upgrade to premium</a> for receiving larger files in Google Drive");
return;
}
showMessage("Uploading file..");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
</script>
</body>
</html>
Wie vorgeschlagen, werde ich den Vorgang hier beschreiben.
Wir sind also auf der Website: www.example.com und haben ein Formular mit einem Texteingabefeld und einem Dateifeld. Nehmen wir an, wir fügen ein Bild ein und nennen es ein Beispiel. Wenn wir nun auf „Senden“ klicken, möchte ich das Bild ohne oAuth auf Google Drive hochladen (deshalb müssen wir hier Google App Script verwenden) und es so benennen, wie wir es in das Textfeld eingegeben haben. Sobald der Upload abgeschlossen ist, möchte ich, dass die URL des Google Drive-Images an die Website zurückgegeben wird, damit das Formular diese Informationen weiterhin verwenden kann. Ich möchte die zurückgegebene URL in einer Variablen speichern und sie später in der Datenbank speichern. Deshalb muss ich die Ergebnisse an meine Website zurückgeben.
Die Lösung sieht also so aus:
Geben Sie Informationen in das Formular auf der Website ein –> Weiterleitung zum Google-App-Skript: Rufen Sie die Informationen des Website-Formularfelds ab, laden Sie die Datei auf Google Drive hoch und benennen Sie sie als Texteingabeeintrag –> Verwenden Sie die Google Drive-URL als Endergebnis das endgültige URL-Ergebnis zurück zur Website-> Speichern Sie das URL-Ergebnis in var und führen Sie die Vorgänge auf der Website weiter aus-> Speichern Sie schließlich die Informationen in var in der Datenbank->
---------------------------------------------------------------- ---------- - Herausgeber: -----
Dank @Tanaike bin ich meinem Herausforderungsziel näher gekommen. Um zu sehen, wo ich steckengeblieben bin, kopiere ich jetzt meine Frage:
Ich habe das Formular mithilfe des Skripts aus Ihrem Beispiel erhalten:
<form id="form">
<input name="file" id="uploadfile" type="file">
<input name="filename" id="filename" type="text">
<input id="submit" type="submit">
</form>
<script>
const form = document.getElementById('form');
form.addEventLis tener('submit', e => {
e.preventDefault();
const file = form.file.files[0];
const fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.onload = f => {
const url = "https://script.google .com/macros/s/###/exec"; // <--- Please set the URL of Web Apps.
const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json())
.then(e => console.log(e)) // <--- You can retrieve the returned value here.
.catch(err => console.log(err));
}
});
</script>
Für Google Script:
function doPost(e) {
// const folderId = "###"; // Folder ID which is used for putting the file, if you need.
const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
const file = DriveApp.getFolderById(folderId || "root").createFile(blob);
const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
Wenn ich jetzt versuche, etwas hochzuladen, erhalte ich die folgende Fehlermeldung: CORS-Richtlinie kann nicht abgerufen werden. Deshalb habe ich diesen Teil wie folgt geändert und keinen Cors-Modus hinzugefügt: const qs = new URLSearchParams({filename: form.filename.value || file.name, mimeType: file.type});
fetch(`${url}?${qs}`, {method: "POST", mode: "no-cors", body: JSON.stringify([...new Int8Array(f.target.result)])})
Das funktioniert. Der zweite Versuch, die Datei hochzuladen, führt zu folgendem Fehler:
Da steht: syntax错误：输入意外结束
Also habe ich diese Zeile geändert und die Klammern aus res.json entfernt
JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json)
Als ich zum dritten Mal versuchte, eine tatsächlich gültige Datei hochzuladen, waren die Konsolenergebnisse wie folgt:
ƒ json() { [native code] }
Aber es gibt keine hochgeladenen Dateien in Google Drive. Mir fehlt irgendwo etwas. Vielleicht sollten wir einen Ordner erstellen und die Dateien darin ablegen.
Oh, noch eine Info: Wenn ich die doPost-Funktion im Google App-Skript ausführe, heißt es:
TypeError: Cannot read property 'postData' of undefined (line 13
Bearbeiten 2 ---------------------------------------------- --- ------
Ich habe https://drive.google .com/uc?export=download&id=###fileId### zu Ihrem Code hinzugefügt und alles funktioniert einwandfrei. Datei wird hochgeladen.
Angenommen, wir laden die Datei test.mp3 hoch und nennen sie testdata.
Das haben wir erhalten:
{
"filename": "testdata",
"fileId": "###some id##",
"fileUrl": "https://drive.google .com/uc?export=download&id=###fileId###"
}
Wenn ich jetzt die Datei-URL öffne, lädt der Browser die Datei herunter, aber ihr Name lautet: testdata statt testdata.mp3. Das Ende des Dateityps fehlt.
Zweite Aufgabe: Wenn Sie auf den Link klicken, möchte ich die Datei im Browser öffnen. Wenn es sich beispielsweise um eine MP3-Datei handelt, möchte ich, dass Sie den Ton in der Webansicht abspielen, wie hier: https:// Dateien .freemusicarchive .org/storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Decalo.mp3
Ich hoffe, du kannst mich führen!
https://stackoverflow.com/a/63391363/1585523 答案中有很多有用的提示！感谢你的分享。除了 POST 文件之外，我们还可以使用
在客户端：index.html
google.script.run.withSuccessHandler(fileName => {}).withFailureHandler(error => {}).saveInDrive(fileAsByteArray);在服务器上：Code.gs
function saveInDrive(f) { const blob = Utilities.newBlob(f, "image/jpeg", "some-name"); const file = DriveApp.getFolderById("root").createFile(blob); return file.getName() }您甚至可以用这种方法交换复杂类型，例如 JS 对象与二进制信息作为值。
我相信您的目标如下。
在这种情况下，我认为使用 Google Apps 脚本创建的网络应用程序可以实现您的目标。
用法：
请执行以下流程。
1。创建 Google Apps 脚本的新项目。
Web Apps 的示例脚本是 Google Apps 脚本。因此，请创建一个 Google Apps 脚本项目。
如果您想直接创建，请访问https://script.new/。在这种情况下，如果您尚未登录 Google，则会打开登录屏幕。所以请登录谷歌。这样，Google Apps 脚本的脚本编辑器就会打开。
2。准备脚本。
请将以下脚本（Google Apps 脚本）复制并粘贴到脚本编辑器中。该脚本适用于网络应用程序。
服务器端：Google Apps 脚本
请设置要放置文件的文件夹ID。
function doPost(e) { const folderId = "root"; // Or Folder ID which is used for putting the file instead of "root", if you need. const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename); const file = DriveApp.getFolderById(folderId).createFile(blob); const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()}; return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON); }3。部署网络应用程序。
https://script.google.com/macros/s/###/exec。4。从客户端上传文件到服务器端。
客户端：HTML 和 Javascript
请将您的 Web 应用程序的 URL 设置为以下脚本。
结果：
运行上述脚本时，将返回以下值。由此，您可以检索文件的 URL。
{ "filename": "### inputted filename ###", "fileId": "###", "fileUrl": "https://drive.google.com/file/d/###/view?usp=drivesdk" }注意：
参考文献：