我正在构建一个Web应用程序,从Web表单中获取文件,并将它们放入Google Drive文件夹中.在提交表单时,我想运行一个带有google.script.run的云函数,同时将Form对象作为参数传递.

我的问题是,在通过表单对象后,我如何访问Code.gs中的文件?我想得到文件名和其他数据. 我的代码:

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <label for="FormControlFile">Select File:</label> 
      <input name="myFile" type="file" id="FormControlFile" multiple />
      <button type="submit">Submit</button>
    </form>

    <?!= include('script'); ?>
  </body>
</html>

Code.gs:

const folderId = "my folder id";
const folder = DriveApp.getFolderById(folderId);

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function uploadFiles(formObject) {
  //formObject.files??
}

Script.html:

<script>

  function preventFormSubmit() {
    const form = document.getElementById("myForm")
    form.addEventListener("submit", (e) => {
      e.preventDefault();
    });
  }

  window.addEventListener("load", preventFormSubmit);

  function handleFormSubmit(formObject) {
    google.script.run.uploadFiles(formObject);
  }
</script>

谢谢

推荐答案

修改要点:

  • 当我看到你的超文本标记语言时,我注意到你用multiple表示<input name="myFile" type="file" id="FormControlFile" multiple />.从这种情况下,我猜测在您的情况下,可能会上传多个文件.

遗憾的是,在当前阶段,google.script.run不能从输入标记解析多个文件.因此,在这种情况下,需要在JAVASRIPT端解析文件.

当这反映在您的脚本中时,它将如下所示.

修改后的脚本:

Google Apps Script: Code.gs

在这种情况下,功能uploadFiles被修改.

const folderId = "my folder id";
const folder = DriveApp.getFolderById(folderId);

function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function include(fileName) {
  return HtmlService.createHtmlOutputFromFile(fileName).getContent();
}

function uploadFiles(formObject) {
  if (formObject.length == 0) {
    return "No files";
  }
  return formObject.map(e => folder.createFile(Utilities.newBlob(...e)).getId());
}

HTML: index.html

这是未修改的.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <form id="myForm" onsubmit="handleFormSubmit(this)">
      <label for="FormControlFile">Select File:</label> 
      <input name="myFile" type="file" id="FormControlFile" multiple />
      <button type="submit">Submit</button>
    </form>

    <?!= include('script'); ?>
  </body>
</html>

Javascript: script.html

在这种情况下,功能handleFormSubmit被修改.

<script>

  function preventFormSubmit() {
    const form = document.getElementById("myForm")
    form.addEventListener("submit", (e) => {
      e.preventDefault();
    });
  }

  window.addEventListener("load", preventFormSubmit);

  function handleFormSubmit(formObject) {
    Promise.all([...formObject.myFile.files].map(file => {
      const fr = new FileReader();
      return new Promise(r => {
        fr.onload = e => r([[...new Int8Array(e.target.result)], file.type, file.name]);
        fr.readAsArrayBuffer(file);
      });
    }))
      .then(obj => google.script.run.withSuccessHandler(console.log).uploadFiles(obj));
  }

</script>
  • 当您打开HTML时使用这个修改过的脚本时,多个文件被选中并点击"提交"按钮,这些文件被上传到Google Drive.并且,您可以在控制台中看到上传的文件ID.

注:

参考资料:

Javascript相关问答推荐

在JS中获取名字和姓氏的首字母

fetch在本地设置相同来源的cookie,但部署时相同的代码不会设置cookie

如何通过onClick为一组按钮分配功能;

为什么getRecord()会因为与_logger相关的错误而失败?(使用Hedera SDK)

如何判断属于多个元素的属性是否具有多个值之一

如何解决chrome—extension代码中的错误,它会实时覆盖google—meet的面部图像?'

微软Edge编辑和重新发送未显示""

在react JS中映射数组对象的嵌套数据

用于编辑CSS样式的Java脚本

在运行时使用Next JS App Router在服务器组件中运行自定义函数

如何在使用rhandsontable生成表时扩展数字输入验证?

使用VUE和SCSS的数字滚动动画(&;内容生成)

无法避免UV:flat的插值:非法使用保留字"

无法重定向到Next.js中的动态URL

Node.js API-queryAll()中的MarkLogic数据移动

未找到用于 Select 器的元素:in( puppeteer 师错误)

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

将延迟加载的模块转换为Eager 加载的模块

KeyboardEvent:检测到键具有打印的表示形式

观察子组件中的@Output事件emits 器?