将图像从WEB FORM上传到谷歌电子表格

所以基本上它从谷歌表单中自动生成的脚本。我找不到一个链接或任何可以帮助我调整的东西，这样我就可以从我的网站上传图片了。它只发送图像名称，而不是实际图像。如果有人能向我解释如何调整它，让它发送真实的图像，我会非常高兴。

<input type="text" id="email" name="email:" placeholder="">
<input type="file" id="myFile" name="filename">

<button>
Send
</button>

Out put
Email: Someone@gmail.com
FileName: Untitled-1.jpg


// if you want to store your email server-side (hidden), uncomment the next line
var TO_ADDRESS = "***@gmail.com";
// spit out all the keys/values from the form in HTML for email
// uses an array of keys if provided or the object to determine field order
function formatMailBody(obj, order) {
var result = "";
if (!order) {
order = Object.keys(obj);
}



// loop over all keys in the ordered form data
for (var idx in order) {
var key = order[idx];
result += "<h4 style='text-transform: capitalize; margin-bottom: 0'>" + key + "</h4><div>" + sanitizeInput(obj[key]) + "</div>";
// for every key, concatenate an `<h4 />`/`<div />` pairing of the key name and its value, 
// and append it to the `result` string created at the start.
}
return result; // once the looping is done, `result` will be one long string to put in the email body
}
// sanitize content from the user - trust no one 
// ref: https://developers.google.com/apps-script/reference/html/html-output#appendUntrusted(String)
function sanitizeInput(rawInput) {
var placeholder = HtmlService.createHtmlOutput(" ");
placeholder.appendUntrusted(rawInput);

return placeholder.getContent();
}
function doPost(e) {
try {
Logger.log(e); // the Google Script version of console.log see: Class Logger
record_data(e);

// shorter name for form data
var mailData = e.parameters;
// names and order of form elements (if set)
var orderParameter = e.parameters.formDataNameOrder;
var dataOrder;
if (orderParameter) {
dataOrder = JSON.parse(orderParameter);
}

// determine recepient of the email
// if you have your email uncommented above, it uses that `TO_ADDRESS`
// otherwise, it defaults to the email provided by the form's data attribute
var sendEmailTo = (typeof TO_ADDRESS !== "undefined") ? TO_ADDRESS : mailData.formGoogleSendEmail;

// send email if to address is set
if (sendEmailTo) {
MailApp.sendEmail({
to: String(sendEmailTo),
subject: "Contact form submitted",
// replyTo: String(mailData.email), // This is optional and reliant on your form actually collecting a field named `email`
htmlBody: formatMailBody(mailData, dataOrder)
});
}
return ContentService    // return json success results
.createTextOutput(
JSON.stringify({"result":"success",
"data": JSON.stringify(e.parameters) }))
.setMimeType(ContentService.MimeType.JSON);
} catch(error) { // if error return this
Logger.log(error);
return ContentService
.createTextOutput(JSON.stringify({"result":"error", "error": error}))
.setMimeType(ContentService.MimeType.JSON);
}
}

/**
* record_data inserts the data received from the html form submission
* e is the data received from the POST
*/
function record_data(e) {
var lock = LockService.getDocumentLock();
lock.waitLock(30000); // hold off up to 30 sec to avoid concurrent writing

try {
Logger.log(JSON.stringify(e)); // log the POST data in case we need to debug it

// select the 'responses' sheet by default
var doc = SpreadsheetApp.getActiveSpreadsheet();
var sheetName = e.parameters.formGoogleSheetName || "responses";
var sheet = doc.getSheetByName(sheetName);

var oldHeader = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var newHeader = oldHeader.slice();
var fieldsFromForm = getDataColumns(e.parameters);
var row = [new Date()]; // first element in the row should always be a timestamp

// loop through the header columns
for (var i = 1; i < oldHeader.length; i++) { // start at 1 to avoid Timestamp column
var field = oldHeader[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);

// mark as stored by removing from form fields
var formIndex = fieldsFromForm.indexOf(field);
if (formIndex > -1) {
fieldsFromForm.splice(formIndex, 1);
}
}

// set any new fields in our form
for (var i = 0; i < fieldsFromForm.length; i++) {
var field = fieldsFromForm[i];
var output = getFieldFromData(field, e.parameters);
row.push(output);
newHeader.push(field);
}

// more efficient to set values as [][] array than individually
var nextRow = sheet.getLastRow() + 1; // get next row
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
// update header row with any new data
if (newHeader.length > oldHeader.length) {
sheet.getRange(1, 1, 1, newHeader.length).setValues([newHeader]);
}
}
catch(error) {
Logger.log(error);
}
finally {
lock.releaseLock();
return;
}
}
function getDataColumns(data) {
return Object.keys(data).filter(function(column) {
return !(column === 'formDataNameOrder' || column === 'formGoogleSheetName' || column === 'formGoogleSendEmail' || column === 'honeypot');
});
}
function getFieldFromData(field, data) {
var values = data[field] || '';
var output = values.join ? values.join(', ') : values;
return output;
}```

在应用程序脚本web应用程序中，为了将文件输入数据从HTML表单发送到服务器，建议的方法是通过google.Script.run调用服务器端函数。在这种情况下，您不会依赖doPost函数(当对web应用程序URL发出POST请求时调用(，而是依赖通过google.script.run调用的服务器端函数(下面的示例中称为processForm(。

当以这种方式调用服务器端函数时，如果将HTML表单元素作为参数传递，则可以访问输入字段名称，如下所述：

如果调用一个以表单元素为参数的服务器函数，则表单将成为一个以字段名为键、以字段值为值的单个对象。除了文件输入字段的内容外，所有值都转换为字符串，这些字段将成为Blob对象。

现在，在决定如何将图像插入电子表格时，您有几个选项，具体取决于：

是要将图像插入到特定的单元格中，还是要在单元格上插入图像(不与特定单元格绑定(
图像的大小
无论您是否关心公开此图片

方法#1。使用insertImage：

如果你想插入图像"；在细胞上"；(也就是说，图像不在一个特定的单元格中(，如果您不希望此图像可以公开访问，您只需提供与图像相对应的Blob作为Sheet.insertImage(blobSource，column，row(的参数即可。

相应的代码可能是这样的：

index.html:

<html>
<body>
<form>
<input type="text" id="email" name="email:" placeholder="">
<input type="file" id="myFile" name="filename">      
<input type="button" value="Send" onclick="google.script.run.processForm(this.parentNode)">
</form>
</body>
</html>

Code.gs:

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(e) {
var contentType = 'image/jpeg'; // Could also be 'image/bmp', 'image/gif', or 'image/png'
var image = e.filename;
var image = image.getAs(contentType);
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1"); // Change sheet name if necessary
sheet.insertImage(image, 1, 1); // Top-left corner of image is top-left corner of A1 (image not in A1, but "over cells")
}

来自输入字段的其他数据可以使用输入CCD_ 5从CCD_。例如，输入的email将经由e["email:"]来检索。

重要提示：由于此问题，超过特定大小的图像无法通过insertImage插入纸张；尝试这样做会导致以下错误消息Exception: Service error: Spreadsheets(我注意到这适用于大约150KB的图像，但不适用于大约260KB的图像(。因此，如果你想插入一个更大尺寸的图像，你可能需要检查方法#2(或者在插入之前调整图像大小，例如，使用Tanaike在这个答案中找到的解决方法(。

方法#2。使用=IMAGE(url(：

如果您想将图像插入到特定的单元格中，并且不关心此图像是否可公开访问，则可以通过创建指向此图像的可公开访问的链接并使用函数image来插入图像。

例如，您可以将此映像上载到Drive，使其可公开访问(与Anyone with the link共享(，并通过=IMAGE(url)添加一个公共URL。在这种情况下，您的服务器端函数可能是这样的(有关URL的更多详细信息，请参阅此(：

function processForm(e) {
var contentType = 'image/jpeg';
var image = e.filename;
var image = image.getAs(contentType);
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Sheet1"); // Change sheet name if necessary
var file = DriveApp.createFile(image); // Add image to Drive
file.setSharing(DriveApp.Access.ANYONE, DriveApp.Permission.VIEW); // Share image with Anyone
sheet.getRange("A1").setFormula("=IMAGE("https://drive.google.com/uc?export=view&id=" + file.getId() + "")");
}

这种方法的一个优点是可以插入更大尺寸的图像。

重要提示：

当前，如果由于此问题启用V8，则无法通过HTML表单文件输入字段成功上传图像。因此，必须禁用V8运行时才能运行(单击Run > Disable new Apps Script runtime powered by Chrome V8(

方法#1。使用insertImage：

方法#2。使用=IMAGE(url(：

重要提示：

相关内容

最新更新

热门标签：