通過聚合物形式的數據來休息api

Question

我正在尋找一些方法來將數據從聚合物表單域傳遞到REST API，實際上，我正在使用core-ajax來做到這一點，但我認爲是一個有點沉重的方法去做吧。

是否有任何標準的方式來做到這一點？

這是我的代碼：

<template> 
<section> 
    <file-input class="blue" id="file" extensions='[ "xls" ]' maxFiles="1">{{ FileInputLabel }}</file-input> 
</section> 
<section> 
    <paper-button raised class="blue" disabled?="{{ (! Validated) || (Submitted) }}" on-tap="{{ Submit }}"> 
    <core-icon icon="send"></core-icon> 
      Process 
    </paper-button> 
</section> 

<paper-toast id="toast" text=""></paper-toast> 

<core-ajax id="ajax" url="/import-pdi" method="POST" handleAs="json" response="{{ response }}" on-core-complete="{{ SubmitFinished }}"></core-ajax> 
</template> 

    <script> 
     Polymer("import-pdi-form", { 

      Validated: false, 
      Submitted: false, 

      FileInputLabel: "SELECT", 
      ready: function() { 
       this.shadowRoot.querySelector("#file").addEventListener("change", function(event) { 
        var container = document.querySelector("import-pdi-form"); 
        container.Validated = (event.detail.valid.length != 0); 
        if (event.detail.valid.length == 0) { 
         container.shadowRoot.querySelector("#toast").text = "Invalid Format"; 
         container.shadowRoot.querySelector("#toast").show(); 
         container.FileInputLabel = "SELECCIONA L'ARXIU"; 
        } 
        else { 
         container.FileInputLabel = event.detail.valid[0].name; 
         var form_data = new FormData(); 
         form_data.append("file", event.detail.valid[0], event.detail.valid[0].name); 
         container.shadowRoot.querySelector("#ajax").body = form_data; 
         container.shadowRoot.querySelector("#ajax").contentType = null; 
        } 
       }); 
      }, 
      Submit: function() { 
       if ((this.Validated) && (! this.Submitted)) { 
        this.Submitted = true; 
        this.shadowRoot.querySelector("#ajax").go(); 
       } 
      }, 
      SubmitFinished: function(event, detail, sender) { 
       if (detail.xhr.status == 200) { 
        this.shadowRoot.querySelector("#toast").text = JSON.parse(detail.xhr.response).message; 
       } 
       else { 
        this.shadowRoot.querySelector("#toast").text = "Server Error"; 
       } 
       this.shadowRoot.querySelector("#toast").show(); 
       this.FileInputLabel = "SELECCIONA L'ARXIU"; 
       this.shadowRoot.querySelector("#file").reset(); 
       this.Submitted = false; 
      } 
     }); 
    </script> 

Answer 1

提交包含我們目前建議您使用ajax-form element自定義元素的形式。看起來您可能已經在使用同一作者的file-input元素，所以這兩者應該很好地協同工作。