两种方式
springMVC-input
这种方式是使用 type 为 file 的 input 组件,在后端使用 spring 的 CommonsMultipartResolver 对象,以流的方式将图片读到写到服务器的硬盘中或者数据库中,在本文中,笔者是将图片写到了服务器的硬盘中。使用这种方式,有个 BUG ,如果想一次上传多张张图片,那只能使用 input 一次选择多张图片。
springMVC-base64
这种方式,首先将图片转换成 base64 编码,然后以文本的方式,传给后台。这种方式需要前端转码,后台程序接收图片后,在进行解码,还有一点,由于图片的体积较大,所以最好是以 post 类型的 ajax 上传到后台。不过好的一点是可以转码后的 base64 的编码字符串保存到一个数组变量中,这样就避免 springMVC-input 上传多张图片的 BUG。
上码
springMVC-input
前端代码:
<!-- input 组件-->
<input name ="fileImg" multiple="multiple" type="file" id="files" /></div>
<!-- 使用 ajaxfileupload 工具上传图片-->
$.ajaxFileUpload ( {
url: '/image/upload', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: 'fileImg', //文件上传域的ID
dataType: 'json', //返回值类型
success: function (data, status) //服务器成功响应处理函数{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数{
alert(e);
}
}
)
return false;
}
后台的代码
TODO
后来
后来遇到了 springMVC 上传大小的限制,在网上查了很久,大多数的说法是将 springMVC 的
maxUploadSize 数设置大些,没有用。最后的解决方案是使用 H5 中的 canvs 工具将图片降质,然后没选择一次照片立刻将图片上传。最后是要开了 springMVC 的上传大小的限制。