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

base64编码图片数据存储服务器如果直接提交base64编码图片数据,过大的话后台会出现转发错误问题。我在刚开始接触base64编码图片数据时,就是把base64编码图片数据传到后台来解码生成图片。导致生成的图片无法打开,后来才发现其实传到后台的base64编码根本就不完整,导致解码出现问题,无法显示图片。所以,base64编码只能在前端处理。后来查阅资料,看见一个不错的解决方式就是

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

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();
	}	
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/129385.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • HTTP 304状态码的详细讲解

    HTTP304错误状态码的详细讲解304缓存策略及实现网页web常见状态码:200,301,302,304,400,401,404,500

  • Anaconda如何安装basemap_安装anaconda安装方法

    Anaconda如何安装basemap_安装anaconda安装方法Anaconda下PyTorch的安装分为在线安装和在线安装。在线安装:这里默认Anaconda已经是安装好了,打开Anaconda的Prompt。不过在安装之前需要说明的是,在线安装对网络的要求比较严格,一定要使用有线网,提高安装过程的稳定性,不要使用无线网,可能会出各种各样的问题。1.设置虚拟环境。之所以要设置虚拟环境,是因为这个python里面的包有很多个,有些个包可以会存…

  • Android ListView默认选中某一项[通俗易懂]

    Android ListView默认选中某一项[通俗易懂]很多时候,在listview加载数据之后,我们希望默认选中第一项,然后我们在setAdapter之后写上如下代码:listview.getChildAt(0).setBackgroundResource(R.color.white);发现程序崩溃:NullPointerException,事实上,setAdapter()是异步的 ,调用了这个方法之后ListView的item并没

  • ant的安装和使用

    ant的安装和使用1.ant的安装1.1添加环境变量:ANT_HOME=D:\software\ant\apache-ant-1.10.1在path中添加:%ANT_HOME%\bin1.2测试是否安装成功

  • YUI Compressor

    YUI Compressor简介根据雅虎卓越性能团队的说法,40%到60%的雅虎用户拥有空闲缓存体验,所有页面浏览量中约有20%是使用空缓存完成的(请参阅TenniTheurer在YUIBlog上的这篇文章)有关浏览器缓存使

  • javascript中for/in循环及使用技巧

    javascript中for/in循环及使用技巧

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号