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)


相关推荐

  • 去哪儿网正式开源内部使用的消息中间件 QMQ

    去哪儿网正式开源内部使用的消息中间件 QMQ

  • aspectjweaver.jar包下载

    aspectjweaver.jar包下载点击链接https://www.eclipse.org/aspectj/downloads.php点击下载后得到一个jar文件:用解压工具解压:就看到aspectjweaver.jar包了。

  • Linux 批量杀进程[通俗易懂]

    Linux 批量杀进程[通俗易懂]1.查需要杀死的进程ps-ef|grepyum2.去除掉里面的grepps-ef|grepyum|grep-vgrep3.打印kill命令ps-ef|grepyum|grep-vgrep|awk'{print”kill”$2}’4.执行kill命令ps-ef|grepyum|grep-vgrep|awk'{print”kill”$2}’|sh删除完成…

  • VSCode 断点调试项目「建议收藏」

    VSCode 断点调试项目「建议收藏」1.安装必须程序首页下载VSCode,打开一个项目扩展安装DebuggerforChrome插件用于Chrome调试;点击扩展搜索DebuggerforChrome然后点击安装2.VScode项目配置打开项目界面按F5出现界面选择Chrome添加成功后点击调试,添加配置,自动生成launch.json,添加配置的url为iis配置地址3…

  • Zuul网关使用_zuul网关的作用

    Zuul网关使用_zuul网关的作用Zuul介绍Zuul与SpringCloudGateway作用差不多,推荐还是使用SpringCloudGateway,毕竟是Spring家族的,优先级高一些。他们都和Nginx一样,主要是用于服务器的反向代理;只要是反向代理,那么久可以提供路由、监控、弹性、安全等功能;一般也是说是网关,因为数据的入口都从这么流入流出。Zuul的核心是过滤器,通过这些过滤器我们可以扩展出很多功能,比如:动态路由动态地将客户端的请求路由到后端不同的服务,做一些逻辑处理,比如聚合多个服务的数据返回。请求监

  • 开源跨境电商erp源码_商城java源码

    开源跨境电商erp源码_商城java源码1订单管理本模块支持多平台订单自动下载同步以及多帐号多店铺订单管理,方便用户对销售进行科学、直观的分类管理。包括订单处理,包装验货,称重出库,智能交运,交运日志,快速拣货,快速发货等子模块。2商品管理(SKU)商品管理模块,提供对亚马逊店逊商品进行线下管理的功能,包括但不限于中文名称、英文名称,售价等相应管理3.采购管理采购管理主要对于商品采购、入库、及供应商的设置,并于商品细分,包括采购管理、入库管理和供应商管理模块。4.物流管理此模块主要提供…

发表回复

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

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