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

文章目录

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

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

前端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编码如图,(特别长)
base64编码的图片如何存入数据库_第2张图片

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/后端接收前端传入的数据显示
base64编码的图片如何存入数据库_第3张图片
2/走完流程,成功存储到服务器的路径下
base64编码的图片如何存入数据库_第4张图片
3/获取服务器地址存入数据库表
base64编码的图片如何存入数据库_第5张图片

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

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


Tomcat的版本低于等于7,设置maxPostSize=“0” 表示post参数无限大
Tomcat的版本大于等于8,设置maxPostSize=“104857600” 表示post参数最大100MB
base64编码的图片如何存入数据库_第6张图片
在这里插入图片描述

你可能感兴趣的:(#,H5,Java)