來自 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。據此，我想確認一下。