用 iron-ajax (Google Polymer) 上传文件

Question

我需要支持如何使用 Polymer 上传新的图像文件和 Java Spring... 我创建了一个包含 2 个字段的 html 表单：一个文件输入和一个简单的文本字段。我想使用 Google Polymer 中的网络组件 iron-ajax 将这些值放在我的 ajax 调用中... 实际上，我创建了一个片段代码，但我无法发送我的文件...它似乎是空值，我无法理解我做错了什么...

这是我的 html 表格：

<form method="post" enctype="multipart/form-data" modelAttribute="userInfo">
   <paper-input type="file" id="txtFilePath" label="File path"></paper-input>
   <paper-input id="firstname" name="firstname" label="Nome"></paper-input>
   <paper-button id="btnSaveInfoProfile" on-tap="saveInfoProfile">Save</paper-button>
</form>

<iron-ajax id="ajaxSaveInfoProfile" method="POST" url="/updateInfoProfile" handle-as="json" on-response="responseUpdateInfoProfile" debounce-duration="0"></iron-ajax>

这是我的 Polymer 脚本：

...
saveInfoProfile: function()
{
    this.$.ajaxSaveInfoProfile.params = 
    {
       "imageProfile": this.$.imageProfile,
       "firstName": this.$.firstname
    };

    this.$.ajaxSaveInfoProfile.generateRequest();
}
...

最后，这是我的 Spring 控制器：

@RequestMapping(value="/updateInfoProfile", method = RequestMethod.POST)
public @ResponseBody ReturnCode updateInfoProfile(@ModelAttribute("userInfo") UserInfoForm form, BindingResult result, HttpServletRequest request)
{
    //...
}

当我 select 我的文件并调用 javascript 方法时，html 页面中的 "imageProfile" 值似乎未定义...

我该如何解决？我做错了什么？

谢谢！

Answer 1

在服务器端，我使用的是 php，但我希望我可以帮助您解决此问题的客户端。 iron-ajax 尚不支持 enctype="multipart/form-data"，但您可以使用 javascript 的 FormData(); 来处理它。您可以创建一个函数，将文件转换为表单数据，然后将其附加到 iron-ajax.

的主体

Polymer({
......
convertFileInputToFormData: function(){
  regexp = /^[^[\]]+/;
  var fileInput = $('input[type="file"]');
  var fileInputName = regexp.exec( fileInput.attr('name') );
  // make files available
  var data = new FormData();
  jQuery.each($(fileInput)[0].files, function(i, file) {
      data.append(fileInputName+'['+i+']', file);
  });
  return data;
},
.......

然后您可以像这样从预提交函数中调用它

formPreSubmit: function(event){
  var form = document.getElementById('Form');
    // here you convert to formData calling our function
    var data = this.convertFileInputToFormData();

    form.request.method = "post";
   // set undefined to prevent default json content type
    form.request.contentType = undefined;
   // here you append your formData to the iron-ajax body
    form.request.body = data;
  form.request.url = "http://your.api/url"

  form.request.debounceDuration = 300;
},

form.request.contentType = undefined; 防止 iron-ajax 将内容类型默认设置为 json。

我知道你没有使用 php 但为了获得完整的想法，在 php 文件上你必须得到这样的数据

if (isset($_FILES['file']['name'][0])) {

$file = $_FILES['file']['name'][0];
    $type = $_FILES['file']['type'][0];
// here yor upload methods

}

$_FILES['file']['name'][0] 因为他们可以处理图像数组。

希望这对您有所帮助，对不起我糟糕的英语

用 iron-ajax (Google Polymer) 上传文件

Upload file with iron-ajax (Google Polymer)

javascript

java

ajax

spring

polymer-1.0