使用谷歌脚本将从 webapp 获取的输入图像上传到谷歌驱动器

Question

I found something similar here，但它似乎比我需要的要复杂得多。

我正在将图像上传到 web 应用程序，我想将图像保存到谷歌驱动器中。

我在以可读格式为DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(file); 传递文件时遇到问题，并且一直出错。我不知道如何以正确的格式传递文件。

HTML：

<input id = "output2" type="file" accept="image/*">
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.files));

</script>


function triggerF(file) {

console.log("event triggered");
console.log(file.name);
google.script.run.withSuccessHandler(yourCallBack1).upload(file)}


function yourCallBack1() {
  console.log("callback called");
  }

GS：

function upload(e) {

const file = new Blob(e);
const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(file);
console.log("created file");

}

更新：Tanaike 的解决方案 #2 对我有用。请在下方查看。

Answer 1

我相信你的目标如下。

• 来自I am uploading an image to a webapp and I would like to save the image into google drive.，您想使用 Web 应用上传图像文件。

这样的话，下面的修改怎么样？

修改脚本一：

幸运的是，HTML 表单解析的 bug 已被移除。 Ref这样，你就可以使用如下修改后的脚本了。

HTML & Javascript 方面：

<form><input id = "output2" name="file" type="file" accept="image/*"></form>
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.parentNode));

function triggerF(file) {
  console.log("event triggered");
  google.script.run.withSuccessHandler(yourCallBack1).upload(file);
}

function yourCallBack1() {
  console.log("callback called");
}
</script>

Google Apps 脚本方面：

function upload(e) {
  const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(e.file);
  console.log("created file");
}

修改脚本2：

作为另一种方法，您还可以使用以下脚本。

HTML & Javascript 方面：

<input id = "output2" type="file" accept="image/*">
<script>
document.getElementById('output2').addEventListener('change', (e) => triggerF(e.target.files[0]));
function triggerF(file) {
  console.log("event triggered");
  const fr = new FileReader();
  fr.readAsArrayBuffer(file);
  fr.onload = (f) => {
    google.script.run.withSuccessHandler(yourCallBack1).upload([[...new Int8Array(f.target.result)], file.type, file.name]);
  };
}

function yourCallBack1() {
  console.log("callback called");
}
</script>

Google Apps 脚本方面：

function upload(e) {
  const filecreat = DriveApp.getFolderById("xxxxxxxxxxxxx").createFile(Utilities.newBlob(...e));
  console.log("created file");
}

注意：

• 在您的脚本中，似乎使用了 Web 应用程序。 在这种情况下，当您修改 Google Apps 脚本时，请将部署修改为新版本。这样，修改后的脚本就会反映在 Web Apps 中。请注意这一点。
• 您可以在“Redeploying Web Apps without Changing URL of Web Apps for new IDE”的报告中查看详细信息。