base64编码的图片如何存入数据库

文章目录

• 前端JS：
• 后端代码：
• 问题：post方法上传 base64编码的图片传到后端为null

base64编码的图片存入数据库的地址为服务器，如果前端获取不到base64编码的话，需要把图片路径转换成文件，再把File文件转成base64，发送给后台，接口获取文件流，转成文件放在服务器地址，然后获取服务器的地址再存入数据库。

前端JS：

/**拍照
 * @param {Object} c
 * @param {Object} d
 */
var base64src="";//全局变量
var upload = function(c, d) {
	"use strict";
	var $c = document.querySelector(c),
		$d = document.querySelector(d),
		file = $c.files[0],
		picPath = $c.value,
		reader = new FileReader();
		
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		$d.setAttribute("src", e.target.result);
		base64src = e.target.result;//获取base64编码的字符串
	};
};

获取到的base64编码如图，（特别长）

FileReader 是H5提供的一个处理文件的API
FileReader对象的方法如下：

readAsBinaryString(file): 这个方法将blob对象或文件中的数据读取为二进制字符串，通常我们将它传送到服务器端，服务器端可以通过这段字符串存储文件。
readAsText(file,encoding): 以纯文本形式读取文件，将读取到的文本保存在result属性中，第二个参数用于指定编码类型，可选的。
readAsDataURL(file): 读取文件并将文件以数据URL的形式保存在result属性中。
readAsArrayBuffer(file): 读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

FileReader对象的事件如下：

onabort:  数据读取中断时触发、 
onerror: 数据读取出错时触发、
onloadstart: 数据读取开始时触发、 
onprogress: 数据读取中、
onload：数据读取成功完成时触发、
onloadend: 数据读取完成时触发，无论成功或失败。

注意：重点内容
FileReader 读取后的文件不会返回给FileReader 本身， 而是存储在了 result 中

后端代码：

	//1,获取到后面的数据
	String base64src=request.getParameter("base64src");
	String base64=base64src.split(",")[1];//通过base64来转化图片,去掉图片头(data:image/jpg;base64,)
	
	//2,解码成字节数组
	byte[] result=BASE64.decode(new String(base64));
	
	//3,字节流转文件
	String uuid=FileUtils.getUUID();//uuid作为保存时的文件名
	
	File picfilepath=new File(BaseConfig.webPath+"upload/kq/"+uuid+".png");//保存文件
	File filepath=new File(BaseConfig.webPath+"upload/kq/");//创建文件夹
	if(!filepath.exists()){//如果没有文件夹，新建
		filepath.mkdirs();
	}
	try{
		FileOutputStream out=new FileOutputStream(picfilepath);
		out.write(result);
		out.close();
	}catch(Exceptione){
		e.printStackTrace();
	}

1/后端接收前端传入的数据显示

2/走完流程，成功存储到服务器的路径下

3/获取服务器地址存入数据库表

问题：post方法上传 base64编码的图片传到后端为null

原因：base64编码的图片太大了，post请求理论上对参数的大小没有限制，但是服务器有限制，把Tomcat的server.xml里设置一下就好了

注：
Tomcat的版本低于等于7，设置maxPostSize=“0” 表示post参数无限大
Tomcat的版本大于等于8，设置maxPostSize=“104857600” 表示post参数最大100MB