使用iron-ajax上传文件（Google Polymer）

Question

我需要支持如何使用Polymer和Java Spring上传新图像文件的方法。我创建了一个具有2个字段的html表单：一个文件输入和一个简单的文本字段。 我想使用Google Polymer中的Web组件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)
{
    //...
}

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

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

谢谢！

Answer 1

在服务器端，我使用的是php，但我希望我可以帮助您解决此问题。 iron-ajax目前尚不支持enctype="multipart/form-data" ，但是您可以使用javascript的FormData();处理它FormData(); 。 您可以创建一个函数，将文件转换为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。

我知道您的arent使用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]是因为它们可以处理图像数组。

希望对您有帮助，对不起我的英语不好