大家好，又见面了，我是你们的朋友全栈君。

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图片数据
			}
		});
	})

//dataUrl	base64图片数据
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();
	}	
}