Data URL 入门
Data Url
1. Data Url 概述
所谓"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。
2. Data URL 入门
- 完整的DataURL语法：DataURL=data:;base64,
- ：表述传递的数据的MIME类型（text/hrml, image/png, image/jpg）
简单的说，data类型的Url大致有下面几种形式。
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<html代码>
data:text/html;base64,<base64编码的html代码>
data:text/css,<css代码>
data:text/css;base64,<base64编码的css代码>
data:text/javascript,<javascript代码>
data:text/javascript;base64,<base64编码的javascript代码>
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
完整语法：
dataurl := “data:” [ mediatype ] [ “;base64” ] “,” data
mediatype := [type “/” subtype ] *( “;” parameter )
data := *urlchar
parameter := attribute “=” value
3. Data URL的原理
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样，在Data URL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，冠以mime-type。我们可以使用Data URL优化网站加载速度和执行效率。
传统的URL：
<img src="https://file.xxx.com/0b5afb4490d94122a5549a7bcf0b55df.jpg" />Data URL:
<img src="data:image/gif;base64,R0lGODlhMwAxAIAAAAAAAP///
yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX
ElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgd
LbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wn
k2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbF
ZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw=="> 传统URL中存放的是外部资源的url地址， 而Data URL 中保存的是base64编码的byte数组的流信息。所以，使用Data URL的话省去了一步下载资源的步骤，相对页面的加载速度会更快。
4. 优缺点的分析
- 浏览器的支持
几乎所有的现代浏览器都支持Data URL格式，包括火狐浏览器，谷歌浏览器，Safari浏览器，opera浏览器。IE8也支持，但有部分限制，IE9完全支持。 - 数据容量
Base64编码的数据体积通常是原数据的体积4/3，也就是Data URL形式的图片会比二进制格式的图片体积大1/3 - 使用场景
DataURL形式的数据不会占用HTTP会话， 所以再访问外部资源或当图片是在服务器端用程序动态生成时借用DATa URL是个不错的选择。
5. 练习
1）需求分析
使用Data URL 实现图片上传的操作
2）实现步骤
- 修改用户实体类， 用户数据库表添加用户头像字段
- 使用基于Data URL的方式实现用户头像上传，实质上就是将前端上传的文件以Base64进行编码，并保存到数据库中
- 在用户controller中添加用户上传的方法
- 在用户service中添加文件处理的方法
- 在service中对文件进行base64编码， 并保存到数据库中
注意：应将mysql数据库的相应字段设置为：mediumtext类型
（1）在系统微服务的userController中添加上传处理的方法
@RequestMapping("user/upload/{id}")
public Result upload(@PathVariable String id, @RequestParam(name = "file") MultipartFile file) {
//1. 调用service保存图片（获取到图片的访问地址（dataURL||http地址））
String imgUrl = userService.uploadImage(id, file);
//2. 返回数据
return new Result(ResultCode.SUCCESS, imgUrl);
}（2）在系统微服务的userService中添加上传处理的方法
/**
* 完成图片处理
* @param id 用户id
* @param file 用户上传的头像文件
* @return 请求路径
*/
public String uploadImage(String id, MultipartFile file) {
String encode = null;
try {
//1. 根据id查询用户
User user = userDao.findById(id).get();
//2. 使用DataURL的形式存储图片（对图片byte数据进行base64编码）
encode = "data:image/png;base64," + Base64.encode(file.getBytes());
System.out.println(encode);
//3. 更新用户头像地址
user.setStaffPhoto(encode);
userDao.save(user);
} catch (IOException e) {
System.out.println(e.getMessage());
e.printStackTrace();
}
//4. 返回
return encode;
}执行成功后数据库返回结果：
