来自 web 应用程序中的 FileReader 创建的对象的数据然后传递给 Google Apps 脚本客户端返回空，未定义，null

Question

我的 web 应用程序有几个文件输入元素，用户可以在其中上传任意数量的不同类型的文件。 我试图首先将所有数据存储在一个数组中，该数组的大小与输入元素的数量相同，其中所述数组中的每个项目都包含来自每个上传文件的数据数组（文件名、blob、mimetype）。

用户可以选择上传或不上传，但如果他们不上传，我仍然需要通过获取其数据属性（标题）为空上传的那一行保存一些参考。

数据显示在浏览器控制台中，但从 Google Apps 脚本的客户端访问时返回未定义/空/空。 我对 FileReader 不是很熟悉。

在服务器端，我想从每个 blob 在 Google Drive 中创建一个文件，最后将 URL 存储在表格中。

提前致谢！

function saveFormData(){

  var fileInputs = document.querySelectorAll('tr.result-row td > input.upload');
  var firstUploadIndex = fileInputs[0].parentElement.parentElement.getAttribute('data-index');

  //Loop through all upload rows
  var uploads = []; //will be array of arrays of multi-uploaded files; each item inside belongs to 1 column in db
  Array.from(fileInputs).forEach(input => {

    var files = input.files; //object file list

    if(files.length < 1){ //if there's no file in the upload input
      var header = input.getAttribute('data-uploadtype'); //save the header name as reference
      var fileData = [header, '', '', '']; 
      uploads.push(fileData);
    } else { //if there's a file/s in the upload input
      var innerUploads = []; //array of data for each file
      //Loop through all these files
      for(var i = 0; i < files.length; i++){
        
        var currentFile = files[i]; 

        if(!currentFile) return; //if no current file, just in case
        const fr = new FileReader();

        fr.onload = (e) => {
          var data = e.target.result.split(','); //split current file
          var fileData = { binary: data[1], mimeType: data[0].match(/:(\w.+);/)[1], filename: currentFile.name };
          innerUploads.push(fileData);
        }
        fr.readAsDataURL(currentFile);
      } //CLOSES FOR LOOP
      uploads.push(innerUploads);

    } //CLOSES IF
  
  }); //CLOSES FOR EACH LOOP

  google.script.run.saveToDrive(uploads);

} //CLOSES FUNCTION

这是上传界面的样子。

Answer 1

我相信你的目标如下。

• 您想要从fileInputs检索值并创建一个uploads数组，包括[header, '', '', '']和{ binary: data[1], mimeType: data[0].match(/:(\w.+);/)[1], filename: currentFile.name } 。

当我看到你的脚本时，我认为你当前问题的原因是因为 FileReader 是在异步进程中运行的。 这已经在我的第一条评论中提到了。

当这反映在您的脚本中时，以下修改如何？

修改脚本：

请修改您的Javascript如下。

function getFiles(file) {
  return new Promise((resolve, reject) => {
    const fr = new FileReader();
    fr.onload = e => {
      const data = e.target.result.split(",");
      const obj = { binary: data[1], mimeType: data[0].match(/:(\w.+);/)[1], fileName: file.name };
      resolve(obj);
    }
    if (file) {
      fr.readAsDataURL(file);
    } else {
      reject("No file");
    }
  });
}

async function saveFormData() {
  var fileInputs = document.querySelectorAll('tr.result-row td > input.upload');
  // var firstUploadIndex = fileInputs[0].parentElement.parentElement.getAttribute('data-index'); // This is not used in your showing script.
  var uploads = [];
  var ar = Array.from(fileInputs);
  for (var i = 0; i < ar.length; i++) {
    var files = ar[i].files;
    if (files.length == 0) {
      var header = ar[i].getAttribute('data-uploadtype'); //save the header name as reference
      var fileData = [header, '', '', ''];
      uploads.push(fileData);
    } else {
      for (var j = 0; j < ar[i].files.length; j++) {
        var res = await getFiles(ar[i].files[j]).catch(err => console.log(err));
        uploads.push(res);
      }
    }
  }

  console.log(uploads); // You can confirm the value in the log.

  google.script.run.saveToDrive(uploads);
}

• 不幸的是，我不知道你的实际HTML。所以，我修改了你的脚本，猜测你的HTML。如果出现错误，请提供HTML。据此，我想确认一下。