首頁(yè) 猿問(wèn) 調(diào)用Google應(yīng)用程序腳本上的圖...

調(diào)用Google應(yīng)用程序腳本上的圖像文件上傳到GoogleDrive

Html5

慕田峪7331174 2023-09-04 15:44:23

我正在嘗試設(shè)置一種將圖像文件上傳到谷歌驅(qū)動(dòng)器的方法。它將使用 timeid 創(chuàng)建一個(gè)文件夾，并將圖像放置在它創(chuàng)建的文件夾中。我在調(diào)用圖像文件時(shí)遇到問(wèn)題。這就是我嘗試的方法，創(chuàng)建了文件夾但沒有圖像。請(qǐng)忽略 timeid 變量中任何缺失的 var。這工作正常。給出的錯(cuò)誤：ReferenceError：imgInp 未定義預(yù)先感謝您的幫助！Code.gs var day = d.getDate(); var month = d.getUTCMonth(); var hour = d.getHours(); var minutes = d.getMinutes(); var realmonth = month+1; var timeid = String(year)+"-"+String(realmonth)+"-"+String(day)+"-"+String(hour)+"-"+String(minutes); var foldername=timeid; var parentFolder=DriveApp.getFolderById("##############");function upload(){ var newFolder=parentFolder.createFolder(timeid); var folderidlookup = newFolder.getId(); var destination = DriveApp.getFolderById(folderidlookup); var imgf = imgInp; var contentType = 'image/jpeg'; var imgf = imgf.getAs(contentType); destination.createFile(imgf)}網(wǎng)頁(yè) <form> <div class="file-field input-field"> <div class="waves-effect waves-light btn" id="wholebtn"><i class="material-icons right">cloud</i>Browse <input type="file" name="imgInp" id="imgInp" onchange="loadFile(event)"> </div> <div class="file-path-wrapper"> <input type="text" class="file-path"> </div> </div> </form> <button class="btn waves-effect waves-light" type="submit" name="action" id ="button">Submit <i class="material-icons right">send</i> </button>JS<script> document.getElementById("button").addEventListener("click",upload); function upload(){ google.script.run.upload(); }</script>

查看完整描述

2 回答

狐的傳說(shuō)

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊

您收到的錯(cuò)誤是因?yàn)槟鷩L試使用一個(gè)imgInp在代碼的任何部分都沒有定義的變量。您可以從輸入中獲取 blob 文件，將其轉(zhuǎn)換為二進(jìn)制數(shù)組字符串，將其傳遞到服務(wù)器端，最后使用它來(lái)創(chuàng)建您的 blob 和給定的 Drive 文件。

使用HTML 服務(wù)指南中有關(guān)如何使用表單以及成功和失敗處理程序的示例，我整理了以下代碼，該代碼可以成功上傳給定圖像：

索引.html

<!DOCTYPE html>

<html>

<head>

? ? <base target="_top">

</head>

<body>

? ? <form>

? ? ? ? <div class="file-field input-field">

? ? ? ? ? ? <div class="waves-effect waves-light btn" id="wholebtn"><i class="material-icons right">cloud</i>Browse

? ? ? ? ? ? ? ? <input type="file" name="imgInp" id="imgInp">

? ? ? ? ? ? </div>

? ? ? ? ? ? <div class="file-path-wrapper">

? ? ? ? ? ? ? ? <input type="text" class="file-path">

? ? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ? <button class="btn waves-effect waves-light" name="action" id="button">Submit

? ? ? ? ? ? <i class="material-icons right">send</i>

? ? ? ? </button>

? ? </form>

? ? <script>

? ? ? ? // Prevent forms from submitting.

? ? ? ? function preventFormSubmit() {

? ? ? ? ? ? var forms = document.querySelectorAll('form');

? ? ? ? ? ? for (var i = 0; i < forms.length; i++) {

? ? ? ? ? ? ? ? forms[i].addEventListener('submit', function(event) {

? ? ? ? ? ? ? ? ? ? event.preventDefault();

? ? ? ? ? ? ? ? });

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? // Add event listeners?

? ? ? ? window.addEventListener('load', preventFormSubmit);

? ? ? ? document.getElementById("button").addEventListener("click", upload);

? ? ? ? // Handler function

? ? ? ? function logger(e) {

? ? ? ? ? ? console.log(e)

? ? ? ? }

? ? ? ? async function upload() {

? ? ? ? ? ? // Get all the file data

? ? ? ? ? ? let file = document.querySelector('input[type=file]').files[0];

? ? ? ? ? ? // Get binary content, we have to wait because it returns a promise?

? ? ? ? ? ? let fileBuffer = await file.arrayBuffer();

? ? ? ? ? ? // Get the file content as binary and then convert it to string?

? ? ? ? ? ? const data = (new Uint8Array(fileBuffer)).toString();

? ? ? ? ? ? // Pass the binary array string to uploadG funciton on code.gs

? ? ? ? ? ? google.script.run.withFailureHandler(logger).withSuccessHandler(logger).uploadG(data);

? ? ? ? }

? ? </script>

</body>

</html>

Code.gs

function doGet() {

? return HtmlService.createHtmlOutputFromFile('Index');

}

function uploadG(imgInp){

? var parentFolder=DriveApp.getFolderById("[FOLER-ID]");

? var newFolder = parentFolder.createFolder('test webApp');

? var folderidlookup = newFolder.getId();

? var destination = DriveApp.getFolderById(folderidlookup);

? var contentType = 'image/jpeg';

? // Convert the binary array string to array and use it to create the Blob

? var blob = Utilities.newBlob(JSON.parse("[" + imgInp + "]"), contentType);

? blob = blob.getAs(contentType);

? destination.createFile(blob)

? return 'Filed uploaded!';

}

反對(duì) 回復(fù) 2023-09-04

牧羊人nacy

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個(gè)贊

文件上傳對(duì)話框

從腳本編輯器運(yùn)行upLoadMyDialog()以開始使用。選擇文件并單擊上傳。

function fileUpload(obj) {

var d=new Date();

var ts=Utilities.formatDate(d, Session.getScriptTimeZone(), "yyyy-MM-dd-HH-mm");

var folder=DriveApp.getFolderById("****** Enter FolderId *******");

var file=folder.createFile(obj.file1).setName(ts);

}

function uploadMyDialog() {

var ss=SpreadsheetApp.getActive();

var html='<form><input type="file" name="file1"/><br /><input type="button" value="Upload" onClick="google.script.run.fileUpload(this.parentNode);" /></form>';

SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");

}

使用事件監(jiān)聽器：

function uploadMyDialog() {

var ss=SpreadsheetApp.getActive();

var html='<form id="f1"><input type="file" name="file1"/><br /><input type="button" value="Upload" id="btn1" /></form>';

html+='<script>window.onload=function(){document.getElementById("btn1").addEventListener("click",function(){google.script.run.fileUpload(document.getElementById("f1"))})}</script>';

SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(html),"Upload File");

}

反對(duì) 回復(fù) 2023-09-04