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

最新推荐文章于 2025-06-28 13:58:27 发布

原创最新推荐文章于 2025-06-28 13:58:27 发布 · 2.5w 阅读

47 ·

CC 4.0 BY-SA版权

框架技术----------------- 同时被 2 个专栏收录

67 篇文章

订阅专栏

前端基础

23 篇文章

订阅专栏

本文介绍了一种前端实现图片转Base64并上传至服务器的方法，并详细解释了如何使用JavaScript进行图片大小限制及Base64编码过程。此外，还提供了后端解析Base64字符串并保存为图片文件的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

即可.