base64编码图片数据存储服务器

如果直接提交base64编码图片数据，过大的话后台会出现转发错误问题。

我在刚开始接触base64编码图片数据时，就是把base64编码图片数据传到后台来解码生成图片。导致生成的图片无法打开，后来才发现其实传到后台的base64编码根本就不完整，导致解码出现问题，无法显示图片。所以，base64编码只能在前端处理。

后来查阅资料，看见一个不错的解决方式就是将base64编码的图片数据转换为Blob（与File相似）并添加到form中提交。下面是代码：

$(".avatar-save").on("click", function() {var img_lg = document.getElementById('imageHead');// 截图小的显示框内的内容html2canvas(img_lg, {allowTaint: true,taintTest: false,onrendered: function(canvas) {canvas.id = "mycanvas";//生成base64图片数据var dataUrl = canvas.toDataURL("image/png");var newImg = document.createElement("img");newImg.src = dataUrl;imagesAjax(dataUrl);//提交base64图片数据}});})

//dataUrlbase64图片数据function imagesAjax(dataUrl) {//这里连带form里的其他参数也一起提交了,如果不需要提交其他参数可以直接FormData无参数的构造函数    var formData = new FormData();//var formData = new FormData(form);   //convertBase64UrlToBlob函数是将base64编码转换为Blob   //append函数的第一个参数是后台获取数据的参数名,和html标签的input的name属性功能相同   formData.append("ImgBase64",convertBase64UrlToBlob(dataUrl));     console.log(formData);    //ajax 提交form$.ajax({url:'uploadImage.action',type:'POST',data:formData, dataType:"text",       processData : false,         // 告诉jQuery不要去处理发送的数据        contentType : false,        // 告诉jQuery不要去设置Content-Type请求头success: function(data) { top.layer.alert("头像更新成功！"); window.location.reload();//刷新当前页面 },error:function(){                    top.layer.alert("头像更新失败，请检查网络后重试！")            }});}

/** * 将以base64的图片url数据转换为Blob * @param urlData *   用url方式表示的base64图片数据 */function convertBase64UrlToBlob(urlData){    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte    //处理异常,将ascii码小于0的转换为大于0    var ab = new ArrayBuffer(bytes.length);    var ia = new Uint8Array(ab);    for (var i = 0; i < bytes.length; i++) {        ia[i] = bytes.charCodeAt(i);    }    return new Blob( [ab] , {type : 'image/png'});}

最后注意的是，因为提交到后台的是Blob类型的数据，没有文件名称，需要强制重新命名名称及类型。

我这里采用的是springMVC注解的方式 接收请求。通过org.springframework.web.multipart.MultipartHttpServletRequest  就可以拿到文件。

/** *添加/更新/替换图片 * @param request * @return */@ResponseBody@RequestMapping(method = RequestMethod.POST,value="information/uploadImage")public String uploadImage(HttpServletRequest request,HttpSession session){String basePath = request.getSession().getServletContext().getRealPath("upload");Manager manager= (Manager)session.getAttribute("manager");JSONObject obj = new JSONObject();//将文件交给文件处理工具类处理List<Map<String, String>> fileName = UploadFileUtil.uploadBlodImage(request,"/image");Accessory accessory = new Accessory();for (Map<String, String> map : fileName) {//取出用户名称accessory.setAccessoryName(map.get("fileName"));//取出路径别名accessory.setUuidFileName(map.get("newFilePath"));//取出上传文件大小accessory.setValueSize(map.get("valueSize"));//将资源附件进行存储并返回附件关联代码managerService.addOrUpdateManagerToAccessory(accessory, manager.getId(), basePath);}return obj.toString();}}