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

13 篇文章 0 订阅
7 篇文章 2 订阅


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
在这里插入图片描述
在这里插入图片描述

  • 11
    点赞
  • 79
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
以下是一个简单的 Spring Boot 控制器代码示例,它可以将一个图片文件转换为 base64 编码并将其存储在 PostgreSQL 数据库中: ```java import java.io.IOException; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.Base64; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.multipart.MultipartFile; @Controller public class ImageController { @Autowired private ImageRepository imageRepository; @GetMapping("/") public String index() { return "index"; } @PostMapping("/upload") public String uploadImage(@RequestParam("file") MultipartFile file) throws IOException { // Read the image file and convert it to base64 Path path = Paths.get(file.getOriginalFilename()); String base64Image = Base64.getEncoder().encodeToString(Files.readAllBytes(path)); // Save the base64 image to the database Image image = new Image(); image.setName(file.getOriginalFilename()); image.setType(file.getContentType()); image.setData(base64Image); imageRepository.save(image); return "redirect:/"; } } ``` 在上面的代码中,我们将上传的文件转换为一个 `Path` 对象,然后读取这个文件并将其转换为一个 base64 编码的字符串。最后,我们创建一个 `Image` 对象,将文件信息和 base64 编码的字符串赋给它,并将其保存到 PostgreSQL 数据库中。 需要注意的是,`Image` 实体类需要包含 `name`、`type` 和 `data` 这三个属性,分别用于存储图片的名称、类型和 base64 编码的字符串。同时,你需要使用 Spring Data JPA 或其他 ORM 框架来实现 `ImageRepository` 接口,以便能够将 `Image` 对象保存到数据库中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值