Jadi pada asasnya tugas itu sangat mudah tetapi saya tidak menemui sebarang penyelesaian yang boleh dilaksanakan untuk masalah saya. Saya mempunyai skrip muat naik yang besar di tapak web saya (kini localhost), tetapi mari kita kurangkan semua kerumitan kepada apa yang perlu sahaja.
Sekarang masalahnya ialah saya sudah mempunyai borang di tapak web saya dan saya tidak mahu borang di dalam script.google .com sebagai html tambahan, saya mahu memindahkan input pengguna saya ke Skrip Apl Google dan kemudian Memuat naik ke pemacu google dan mengembalikan url ke tapak web saya, saya boleh menyimpannya ke dalam var.
Masalah saya sekarang ialah saya tidak boleh menyusun semuanya.
Ini adalah borang di laman web saya (dipermudahkan):
<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>
Jadi bagaimana saya boleh memuat naik maklumat saya di Google Drive dan mendapatkan hasilnya? Bagaimanakah saya boleh menolak data daripada Skrip Apl Google tanpa menggunakan iFrames atau perkara lain?
Terima kasih!
**** Contoh berfungsi jika html ada dalam script.google .com ****
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 dalam 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>
Seperti yang dicadangkan, saya akan menerangkan prosesnya di sini.
Jadi kami berada di tapak web: www.example.com, dan mempunyai borang dengan medan input teks dan medan fail. Katakan kita meletakkan imej dan menyebutnya sebagai contoh. Sekarang, jika kita tekan serah, saya mahu memuat naik imej ke Google Drive tanpa sebarang oAuth (sebab itu kita perlu menggunakan Skrip Apl Google di sini) dan namakannya apa yang kita taip dalam medan teks. Setelah muat naik selesai, saya mahu url imej google drive dikembalikan ke laman web supaya borang boleh terus menggunakan maklumat tersebut. Saya ingin menyimpan url yang dikembalikan dalam var dan kemudian menyimpannya dalam pangkalan data. Itulah sebabnya saya perlu mengembalikan keputusan ke laman web saya.
Jadi penyelesaiannya kelihatan seperti ini:
Masukkan maklumat ke dalam borang di tapak web -> Ubah hala ke skrip aplikasi google: Dapatkan maklumat medan borang tapak web dan muat naik fail ke pemacu google dan namakannya entri input teks -> hasil url terakhir kembali ke tapak web-> Simpan hasil url dalam var dan teruskan menjalankan operasi daripada fungsi pada tapak web->
---------------------------------------------------------------- ------------------------ - Editor: -------------------
Terima kasih kepada @Tanaike Saya semakin hampir kepada matlamat cabaran saya, jadi untuk melihat di mana saya tersekat, saya menyalin soalan saya sekarang:
Saya mendapat borang menggunakan skrip daripada contoh anda:
<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>
Untuk Skrip Google:
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);
}
Kini apabila saya cuba memuat naik sesuatu, saya mendapat ralat berikut: Polisi CORS tidak boleh diperolehi. Jadi saya menukar bahagian ini kepada yang berikut dan menambah tiada mod cors: 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)])})
Ini berkesan. Percubaan kedua untuk memuat naik fail menghasilkan ralat berikut:
Ia berkata: syntax错误：输入意外结束
Jadi saya menukar baris ini dan mengalih keluar kurungan daripada res.json
JSON.stringify([...new Int8Array(f.target.result)])})
.then(res => res.json)
Kali ketiga saya cuba memuat naik fail yang sah, keputusan konsol adalah seperti berikut:
ƒ json() { [native code] }
Tetapi tiada fail yang dimuat naik dalam Google Drive. Saya kehilangan sesuatu di suatu tempat. Mungkin kita perlu membuat folder dan meletakkan fail di dalamnya.
Oh, satu lagi maklumat: apabila saya menjalankan fungsi doPost dalam skrip aplikasi google, ia berkata:
TypeError: Cannot read property 'postData' of undefined (line 13
Edit 2 ------------------------------------------------- -------
Saya menambahkan https://drive.google .com/uc?export=download&id=###fileId### pada kod anda dan semuanya berfungsi dengan baik. Fail sedang dimuat naik.
Andaikan kami memuat naik fail test.mp3 dan namakannya testdata.
Inilah yang kami terima:
{
"filename": "testdata",
"fileId": "###some id##",
"fileUrl": "https://drive.google .com/uc?export=download&id=###fileId###"
}
Sekarang apabila saya membuka url fail penyemak imbas memuat turun fail tetapi namanya ialah: testdata dan bukannya testdata.mp3. Penghujung jenis fail tiada.
Tugas kedua: Jika anda klik pada pautan, saya ingin membuka fail dalam pelayar, contohnya, apabila ia adalah fail mp3, saya mahu anda memainkan bunyi dalam paparan web, seperti di sini: https:// files .freemusicarchive .org/storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Decalo.mp3
Semoga anda dapat membimbing saya!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://stackoverflow.com/a/63391363/1585523 Banyak petua berguna dalam jawapan! terima kasih atas perkongsian anda. Selain fail POST, kita juga boleh menggunakan
Pada pelanggan: index.html
google.script.run.withSuccessHandler(fileName => {}).withFailureHandler(error => {}).saveInDrive(fileAsByteArray);Pada pelayan: Code.gs
function saveInDrive(f) { const blob = Utilities.newBlob(f, "image/jpeg", "some-name"); const file = DriveApp.getFolderById("root").createFile(blob); return file.getName() }Anda juga boleh menggunakan kaedah ini untuk menukar jenis kompleks seperti objek JS dengan maklumat binari sebagai nilai.
Saya percaya matlamat anda adalah seperti berikut.
Dalam kes ini, saya rasa aplikasi web yang dibuat menggunakan Skrip Google Apps boleh mencapai matlamat anda.
Penggunaan:
Sila ikuti proses berikut.
1. Buat projek baharu untuk Skrip Google Apps.
Skrip contoh untuk Apl Web ialah Skrip Google Apps. Jadi, buat projek Skrip Google Apps.
Jika anda ingin membuat terus, sila layari https://script.new/. Dalam kes ini, jika anda belum log masuk ke Google, skrin log masuk akan dibuka. Jadi sila log masuk ke Google. Ini akan membuka editor skrip Skrip Google Apps.
2. Sediakan skrip.
Sila salin dan tampal skrip berikut (Skrip Google Apps) ke dalam editor skrip. Skrip ini sesuai untuk aplikasi web.
Sisi pelayan: Skrip Google Apps
Sila tetapkan ID folder di mana anda ingin meletakkan fail.
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. Sebarkan aplikasi web.
https://script.google.com/macros/s/###/exec.4. Muat naik fail dari klien ke pelayan.
Pelanggan: HTML dan Javascript
Sila tetapkan URL aplikasi web anda kepada skrip berikut.
ssscccHasil:
Apabila menjalankan skrip di atas, nilai berikut akan dikembalikan. Daripada ini, anda boleh mendapatkan semula URL fail tersebut.
{ "filename": "### inputted filename ###", "fileId": "###", "fileUrl": "https://drive.google.com/file/d/###/view?usp=drivesdk" }Nota:
Rujukan: