时间戳

首页 > 解决方案 > 在 javascript 对象服务器端 Google Code.gs 中发送附件

javascript - 在 javascript 对象服务器端 Google Code.gs 中发送附件

问题描述

任何人都知道我如何发送包含附件的对象数组？

我正在开发一个捕获每周里程条目的 WebApp。在周末，用户可以提交他们的行驶里程并附上停车收据。

我能够将对象数组发送到服务器端 Code.gs 直到我尝试包含每天的文件输入。

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("tripPost").addEventListener("click", addLine);
  document.getElementById("submitAll").addEventListener("click", addRecord);
});

//global variables for next functions
var submit = document.getElementById("tripPost");
var submittedTable = document.getElementById("submitted-data");
var mainEntry = document.getElementById("entry-table");
var submitAll = document.getElementById("submitAll");

submittedTable.addEventListener("click", addLine);
submittedTable.addEventListener("change", fileUpload);

function addLine() {
  document.getElementById("table-container").style.display = "block";

  var date = document.getElementById("date1").value;
  var efirst = document.getElementById("efirst").value;
  var elast = document.getElementById("elast").value;

  var row = document.createElement("tr");
  var col1 = document.createElement("td");
  col1.appendChild(document.createTextNode(date));
  col1.className = "postDateClass";
  var col2 = document.createElement("td");
  col2.appendChild(document.createTextNode(efirst));
  col2.className = "postEfirstClass";
  var col3 = document.createElement("td");
  col3.appendChild(document.createTextNode(elast));
  col3.className = "postElastClass";

  var col4 = document.createElement("td");

  row.appendChild(col1);
  row.appendChild(col2);
  row.appendChild(col3);
  row.appendChild(col4);

  submittedTable.appendChild(row);

  var uniqueID = "id" + new Date().getTime();
  var upload = document.createElement("input");
  upload.type = "file";
  upload.id = uniqueID;
  upload.name = "myReceipt";
  upload.className = "uploadClass";

  var label = document.createElement("label");
  label.innerHTML = "upload me please!";
  label.htmlFor = uniqueID;
  label.className = "custom-file-upload";

  var form = document.createElement("form");
  form.appendChild(upload);
  form.appendChild(label);

  col4.appendChild(form);
}

function fileUpload(e) {
  if (e.target.className === "uploadClass") {
    if (e.target.value) {
      var span = document.createElement("span");
      span.className = "uploadSpanText";
      span.innerHTML = e.target.value.match(/[\/\\]([\w\d\s\.\-\(\)]+)$/)[1];
      e.target.parentElement.appendChild(span);
      e.target.nextElementSibling.innerHTML = "uploaded!";
      e.target.nextElementSibling.style.border = "1px solid #a8e0b4";
      e.target.nextElementSibling.style.color = "#8bca9e";
    }
  }
}

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

//gathers inputs and stores values in an object and runs the "addLine" function
async function addRecord(e) {
  var dateLines = document.querySelectorAll(".postDateClass");
  var eFirstLines = document.querySelectorAll(".postEfirstClass");
  var eLastLines = document.querySelectorAll(".postElastClass");
  var attachmentLines = document.querySelectorAll(".uploadClass");
  var mileageData = [];
  for (var i = 0; i < dateLines.length; i++) {
    var mileageLines = {};
    mileageLines.travelDate = dateLines[i].textContent;
    mileageLines.firstName = eFirstLines[i].textContent;
    mileageLines.lastName = eLastLines[i].textContent;
    mileageLines.receipt = await getFile(attachmentLines[i].parentNode);

    mileageData.push(mileageLines);
  }

  //send object to google. resets input elements
  google.script.run.userMileageSubmit(mileageData);
}

这是我正在使用的代码的 HTML。

<div id="entry-table">
     <table>
        <h3 style="text-align:left"><u><b>Enter mileage information below.</b></u><br></h3>
        <thead>
         <tr>
              <th >Date</th>
              <th >First:</th>
              <th >Last:</th>
         </tr>
         </thead>

         <tbody id="table-data">
           <tr>
            <td>
              <div class="disabled-results" id="date">
                 <input placeholder="Start Date" id="date1" type="text" class="datekeeper" required>
                <label for="date1" class="active">Date:</label>
              </div>
            <td>
              <div class="disabled-results">
                 <input id ="efirst" type="text" class="validate" >
                 <label for="efirst" class="active">First:</label>
              </div>
            </td>
            <td>
              <div class="disabled-results">
                 <input id ="elast" type="text" class="validate" >
                 <label for="elast" class="active">Last:</label>
              </div>
            </td>
            <td>
               <div id="status">
                  <button id="tripPost" class="waves-effect waves-light btn-small blue darken-3">Add Trip</button>
               </div>
            </td>
         </tr>
       </tbody>
      </table>
</div><!---CLOSE ROW ---> 

<div class="autocomplete" id="table-container" style=display:none>
       <table>
         <thead>
          <tr id="header-titles">
              <th >Date</th>
              <th >First:</th>
              <th >Last:</th>
              <th >Receipt </th>
          </tr>
        </thead>
        <form>
        <tbody class="form" id="submitted-data">
          <div>
              <p>Thank you!</p>
          </div>
          </form>
         </tbody>
      </table>
      <br><br>
   </div>

<center>
  <div class="row">    
    <button  id="submitAll" class="waves-effect waves-light btn btn-large blue darken-3"><i class="material-icons left">directions_car</i>Submit All Mileage!</button>          
  </div>
</center>

这是CSS

body {
    background-color: lightblue;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-right: 80px;
    margin-left: 80px;    
    }

    h1{
    color: black;
    text-align: center;
    }
div.disabled-results{
  width: 175px;
  height: 80px;
  padding: 5px;
  margin: 5px;
  display: inline-table;
  box-sizing: border-box;
  text-align: center;
  }

input[type="file"]{
  display: none;
  }

  .custom-file-upload{
    border: 2px solid #000;
    width: 85px;
    display: inline-block;
    padding: 2px 1px;
    cursor: pointer;
    text-align: center;
  }

div.autocomplete{
width: 55px;
  height: 80px;
  padding: 5px;
  margin: 5px;
  display: inline-table;
  box-sizing: border-box;
  text-align: center;
  }

除了将每行中的附件（如果有）作为对象的一部分发送之外，我还可以进行其他所有操作。

我确信这是可以做到的。我尝试从该视频中实现解决方案，该视频向您展示如何上传文件，但我不使用onclickorthis.parentNode因为我没有在选择文件后立即上传，而是在用户输入大量条目时进行批量上传.

任何有助于理解这应该如何工作的帮助将不胜感激。

谢谢你。

标签： javascriptgoogle-apps-script

解决方案

鉴于您将几个推mileageLines入 array mileageData，您的数据将如下所示：

[{...,claimMiles=claimMilesLines[0].textContent; receipt=attachmentLines[0].files[0]}, {...,claimMiles=claimMilesLines[1].textContent;, receipt=attachmentLines[1].files[0]},...]

这意味着您需要以数组元素的形式访问数据

var file1 = responses[0].receipt;
var file2 = responses[1].receipt;

或者

for( var i = 0; i < responses.length; i++){
var file = responses[i].receipt;
...
var createFile = mainFolder.createFile("formfile", file);
}

推荐阅读