• 学习Vue的路上又遇到了个小坑，关于file数据绑定的问题。主要需求就是需要做一个关于表单提交的界面，包含上传图片功能。因为之前做过文件上传，但是针对单文件上传。就比较简单。由于对http传输还不是太透彻，所以也遇到了一系列的问题。一下就是遇到的一个问题。

1、报错：Failed to set the ‘value’ property on ‘HTMLInputElement’:

• 其实这个问题主要是表单对象无法解析File对象。表单对象只支持存放String类型。
• DOMException: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string
  

2、数据结构

• 可以看到打印出来的类型为File类型，也尝试过直接在后台接收对象。后台识别为HashMap类型。我用的Object接收最后没能解析出来。
  
• 我的vue里面绑定的数据是这样的。归根到底就是上传的几张图出问题了，既然只能绑定String类型。那就转成String类型呗。图片上传是可以解析成base64格式放在json里面传输的。
  

3、File转base64类型。

• JS代码

frontChange:function() {
	var file = $("#front_img").get(0).files[0];
	            var r = new FileReader();
	            r.readAsDataURL(file);
	            $(r).load(function () {
	                $('#front').html('<img class="photo" src="' + this.result + '" alt="" />');
	            })
	            if(null != file){
	                var reader = new FileReader();
	                reader.readAsDataURL(file);
	                reader.onload = function (e) {
	                    vm.frontCardImage = e.target.result;
	                }
	            }
	            //打印看看转后的样子
	            console.log(vm.frontCardImage);
}

这样不就可以直接传了么。上述问题也解决了。后台直接用String接收转成需要的的类型即可。String接收不知道会不会出现数据丢失的情况。暂时是没遇到。待考证~~，前端比较菜,数据都是一个一个绑的。不知道路过的大佬有没有更简便的方法、指点一二！

这篇博客存在草稿太久了，一直没时间写完。有的细节记不太清了。大致思路就是这样。如有贻误。望指正，谢谢哈。非专业前端，初尝Vue2.0。书写规范不正确也欢迎指正。嘿嘿