前台传base64格式的图片,后台来接受处理.

1.首先你得知道前台传的是什么玩意.

   

<body>
	<input type="file" id="image"><br/>
	<div id="div"></div>
</body>
<script type="text/javascript" src="juqery-1.8.3.js"></script>
<script type="text/javascript">
	//给file添加一个事件,当选择了文件后,执行下面uploadFile的方法
	$("#image").bind("change", function() {
		uploadFile($(this));
	});
	//通过onChange直接获取base64数据
	function uploadFile(file) {
		var reader = new FileReader();
        var allowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
        var file = $("#image")[0].files[0];
        var imgUrlBase64;
        if (file) {
            //将文件以Data URL形式读入页面  
            imgUrlBase64 = reader.readAsDataURL(file);
            reader.onload = function (e) {
              //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通)
              if (allowImgFileSize != 0 && allowImgFileSize < reader.result.length) {
                    alert( '上传失败,请上传不大于2M的图片!');
                    return;
                }else{
                    //将转码后的数据展示出来
                    $("#div").html(reader.result)//data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/
                }
            }
         }  
	}
</script>

前台最终转的结果是:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/......是这样的.也就是说

data:+文件格式+";"+base64+","+核心数据.

取到了转码后的数据,那么传给后台,后台怎么解决呢?

2.后台怎么解析Base64

其实这跟后台不后台没有什么关系,关键是你得理解什么是base64,什么是文件.

base64只是字节的编码方式.文件是字节的数据集.

想要转成文件,那么就只需要解码成字节数组,然后通过字节流写成文件即可.如下图代码,

/**
		 * 1.获取到后面到数据
		 */
		String data = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD....";
		String base64Data =  data.split(",")[1];
		/**
		 * 2.解码成字节数组
		 */
		Decoder decoder = Base64.getDecoder();
		byte[] bytes = decoder.decode(base64Data);
		/**
		 * 3.字节流转文件
		 */
		FileOutputStream fos = null;
				try {
					fos = new FileOutputStream("E:\\aaa.jpg");
					fos.write(bytes);
					return name;
				} catch (IOException e) {	
					e.printStackTrace();
				} finally {
					if (fos != null){
						try {
							fos.close();
						} catch (IOException e) {
							e.printStackTrace();
						}
					}
				}	

即可.

猜你喜欢

转载自blog.csdn.net/dmw412724/article/details/81134644