DataURL入门,图片储存在数据库字段中

最新推荐文章于 2025-02-18 13:38:03 发布

_无往而不胜_

最新推荐文章于 2025-02-18 13:38:03 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： DataURL 图片储存图片图片上传图片储存在数据库字段中

本文链接：https://blog.youkuaiyun.com/qq_15204179/article/details/86738435

java 专栏收录该内容

347 篇文章

订阅专栏

本文深入讲解DataURL的概念，探讨其在网页中嵌入图片的优势与局限，对比传统img标记的使用，解析Base64编码原理，展示如何利用DataURL优化网页加载速度，减少HTTP请求。

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

DataURL入门

DataURL概述

所谓DataURL是指"data"类型的Url格式，是在RFC2397中提出的，目的是对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入

Data URL入门

完整的DataURL语法：DataURL= data:mediatype;base64,<Base64编码的数据>。

mediatype：表述传递的数据的MIME类型（text/html，image/png，image/jpg）

简单的说，data类型的Url大致有下面几种形式。

Data URL基本原理

Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用 img 标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-

type。

图片在网页中的使用方法通常是下面这种利用标记的形式：

<img src="images/myimage.gif ">

这种方式中， img 标记的属性指定了一个远程服务器上的资源。当网页加载到浏览器中时，浏览器会针对每

个外部资源都向服务器发送一次拉取资源请求，占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着，如果一个网页里嵌入了过多的外部资源，这些请求会导致整个页面的加载延迟。而使用Data

URL技术，图片数据以base64字符串格式嵌入到了页面中，与HTML成为一体，它的形式如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALwAAAA5CAYAAACMNEHAAAAAGXRFWHRTb2Z0d2FyZ QBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU 6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy 0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyL zIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0 dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3h hcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC 8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo5ZDAxYjE4NC04MTFlLTE4NDEtYTUwYi0wMzljN

上面的base64字符串中你看不出任何跟图片相关的东西，但下面，我们将传统的 img 写法和现在的Data URL用法左右对比显示，你就能看出它们是完全一样的效果。但实际上它们是不一样的，它们一个是引用了外部资源，一个是使用了Data URL。

优缺点分析

浏览器支持

几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。

IE8也支持，但有部分限制，IE9完全支持。

数据容量

Base64编码的数据体积是原数据的体积4/3，也就是DataURL形式的图片会比二进制格式的图片体积大1/3。

使用场景

DataURL形式的数据不会占用HTTP会话，所以再访问外部资源或当图片是在服务器端用程序动态生成时借用

DataURL是一个不错的选择

Data URL实现图片上传

修改用户实体类，用户数据库表添加图片字段

使用基于Data URL的方式实现用户上传，实质是将前端上传的文件以Base64进行编码并且保存到数据库中。用户controller中添加用户上传方法

用户service中添加上传文件处理的方法

在service中需要对文件进行base64编码，并且保存到数据库中

@RequestMapping(value="/user/upload/{id}")
public Result upload(@PathVariable String id,@RequestParam(name = "file") MultipartFile file) throws Exception {
String image = userService.uploadImage(id, file); return new Result(ResultCode.SUCCESS,image);
}

（2）在系统微服务的 中添加上传处理的方法

public String uploadImage(String id, MultipartFile file) throws Exception {
//根据id查询用户
User user = userDao.findById(id).get();
//对上传文件进行Base64编码
String s = Base64.encode(file.getBytes());
//拼接DataURL数据头
String dataUrl = new String("data:image/jpg;base64,"+s);
user.setStaffPhoto(dataUrl);
//保存图片信息userDao.save(user); return dataUrl;
}