Data Url

1. Data Url 概述

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

2. Data URL 入门

完整的DataURL语法：DataURL=data:;base64,<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;
}

执行成功后数据库返回结果：
在这里插入图片描述

Data URL 入门