未捕获的类型错误：不支持来宾构造对象的驯服：[object Object]

Question

在 Google Apps 脚本中，我在 HTML 页面中有一个表单，它应该在提交时将表单提交给函数。但是，当用户单击提交时，此消息会出现在控制台中。

Uncaught TypeError: Untaming of guest constructed objects unsupported: [object Object]

我正在使用code from Labnol 进行指导

所有代码如下：

code.gs

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(form) {

  try {

    var dropbox = "Student Files";
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }

    var blob = form.myFile;    
    var file = folder.createFile(blob);    
    file.setDescription("Uploaded by " + form.myName);

    return "File uploaded successfully " + file.getUrl();

  } catch (error) {

    return error.toString();
  }

}

HTML

<?!= include('bootstrap'); ?>
<?!= include('style'); ?>

     <div class="container"> 
           <div class="row bottom-margin">
                      <div class="col-xs-4">
                        <h1> THE FORM </h1>
                       </div>
                       </div>

          <div class="span4">
               <form id="form">
                    <div class="row bottom-margin">
                         <div class="col-xs-6">
                              <input type="text" class="form-control" name="firstname" placeholder="First name..">
                         </div>
                     </div>

                    <div class="row bottom-margin">
                      <div class="col-xs-6">
                      <input type="text" class="form-control" name="lastname" placeholder="Last name..">
                      </div>
                    </div>

                    <div class="row">
                    <div class="col-xs-6">
                      <p> How would like to receive your order? </p>
                    </div>
                    </div>

                    <div class="row bottom-margin">
                    <div class="span12">
                      <div class="col-xs-6">
                        <label class="radio-inline">
                          <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Mail ($1 charge)
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Locker Drop Off
                        </label>
                        <label class="radio-inline">
                          <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Meet at next Event etc.
                        </label>
                      </div>
                    </div>
                    </div>

                    <div class="row bottom-margin">
                    <div class="col-xs-4">
                    <input type="file" class="form-control" name="myFile">
                    </div>
                    </div>

                  <div class="row">
                      <div class="col-xs-2">
                       <button type="submit" class="btn btn-primary" value="Upload File" 
                           onclick="this.value='Uploading..';
                           makeAlert($('#form'));
                           google.script.run.withSuccessHandler(fileUploaded)
                           .uploadFiles(this.parentNode.parentNode.parentNode.parentNode);
                           return false;">
                           Submit
                       </button>
                      </div>
                 </div>  
        </form>
    </div>
</div>

<div id="output"></div>

<script>
function makeAlert(item){
  console.log(item);
}
function fileUploaded(status) {
  document.getElementById('myForm').style.display = 'none';
  document.getElementById('output').innerHTML = status;
}
</script>


<?!= include('jquery'); ?>
<?!= include('bootstrapjs'); ?>

Answer 1

您报告的错误，不支持的来宾构造对象的取消驯化，报告您作为"application/x-www-form-urlencoded" 表单传递的对象并非完全如此。您在传递值之前尝试记录值是一种很好的直觉，但由于控制台最终只显示[object object]，因此没有多大帮助。

通过将任何objects 转换为字符串，这将有助于确保makeAlert() 打印的消息是可读的：

function makeAlert(item){
  console.log("makeAlert: "+JSON.stringify(item));
}

这样，您会在控制台上看到类似这样的内容：

makeAlert: {
  "0": {
    "0": {},
    "1": {},
    "length": 2,
    "elements": {
      "0": {},
      "1": {},
      "myFile": {}
    },
    "target": "",
    "noValidate": false,
    "name": "",
    "method": "get",
    "encoding": "application/x-www-form-urlencoded",
    "enctype": "application/x-www-form-urlencoded",
    "autocomplete": "on",
    "action": "",
    "acceptCharset": ""
  },
  "length": 1,
  "context": {
    "location": {
      "hash": "",
      "search": "",
      "pathname": "/userCodeAppPanel",
      "port": "",
      "hostname": "n-myhzlyl6lgsiepuppv5btyezx3ibnjwczjyz6ii-script.googleusercontent.com",
      "host": "n-myhzlyl6lgsiepuppv5btyezx3ibnjwczjyz6ii-script.googleusercontent.com",
      "protocol": "https:",
      "origin": "https://n-myhzlyl6lgsiepuppv5btyezx3ibnjwczjyz6ii-script.googleusercontent.com",
      "href": "https://n-myhzlyl6lgsiepuppv5btyezx3ibnjwczjyz6ii-script.googleusercontent.com/userCodeAppPanel",
      "ancestorOrigins": {
        "0": "https://n-myhzlyl6lgsiepuppv5btyezx3ibnjwczjyz6ii-script.googleusercontent.com",
        "1": "https://script.google.com"
      }
    },
    "jQuery19107126029687933624": 1
  },
  "selector": "#form"
}

我收到的这个最小化代码的错误与你的有点不同：

未捕获的 InvalidArgumentError：由于属性中的非法值而失败：0

非法值（不属于表单）是：

    "jQuery19107126029687933624": 1

查看最小化的 HTML，并重新计算 <button> 的父元素，您会发现有三个，而不是四个。将.parentNode() 调用减一，错误就清除了。

这样，文件就会被传输到服务器端，并被上传。但是还有另一个错误：

未捕获的类型错误：无法读取 null 的属性“样式”

这仅仅是因为您的 JavaScript 中的拼写错误，可能来自剪切和粘贴操作，因为没有名为 'myForm' 的表单。

这是我测试成功的最小化代码：

索引.html

<html>
<div class="container">
  <div class="span4">
    <form id="form">


      <div class="row bottom-margin">
        <div class="col-xs-4">
          <input type="file" class="form-control" name="myFile">
        </div>
      </div>

      <div class="row">
        <div class="col-xs-2">
          <button type="submit" class="btn btn-primary" value="Upload File" onclick="this.value='Uploading..';
                           makeAlert($('#form'));
                           google.script.run.withSuccessHandler(fileUploaded)
                           .uploadFiles(this.parentNode.parentNode.parentNode);
                           return false;">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<div id="output"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  function makeAlert(item) {
    console.log("makeAlert: " + JSON.stringify(item));
  }

  function fileUploaded(status) {
    document.getElementById('form').style.display = 'none'; // No form "myForm"
    document.getElementById('output').innerHTML = status;
  }
</script>

</html>

代码.gs

问题中没有提供 Google Apps 脚本代码，因此这是对 doGet() 和 uploadFiles() 提供的功能的猜测。

/**
 * Serves HTML of the application for HTTP GET requests.
 *
 * @param {Object} e event parameter that can contain information
 *     about any URL parameters provided.
 */
function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Index');

  // Build and return HTML in IFRAME sandbox mode.
  return template.evaluate()
      .setTitle('Web App Window Title')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


// adapted from code from http://ctrlq.org/code/19747-google-forms-upload-files
/* This function will process the submitted form */
function uploadFiles(form) {

  /* Name of the Drive folder where the files should be saved */
  var dropbox = "Dropbox";
  var folder, folders = DriveApp.getFoldersByName(dropbox);

  /* Find the folder, create if the folder does not exist */
  if (folders.hasNext()) {
    folder = folders.next();
  } else {
    folder = DriveApp.createFolder(dropbox);
  }

  /* Get the file uploaded through the form as a blob */
  var blob = form.myFile;    
  var file = folder.createFile(blob);    

  /* Return the download URL of the file once its on Google Drive */
  return "File uploaded successfully " + file.getUrl();

}