1 图片上传
1.1 需求分析
如图所示,实现员工照片上传功能
1.2 Data URL
1.2.1 DataURL概述
所谓DataURL是指"data"类型的Url格式,是在RFC2397中提出的,目的是对于一些“小”的数据,可以在网页中直接嵌入,而不是从外部文件载入。
1.2.2 Data URL入门
- 完整的DataURL语法:DataURL= data:mediatype;base64,<Base64编码的数据>。
- mediatype:表述传递的数据的MIME类型(text/html,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的图片形式,接下来以图片形式的DataURL分析其原理和利弊
1.2.3 Data URL基本原理
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用 img 标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。
图片在网页中的使用方法通常是下面这种利用 img 标记的形式:
<img src="images/myimage.gif ">
这种方式中, img 标记的 src 属性指定了一个远程服务器上的资源。当网页加载到浏览器中时,浏览器会针对每个外部资源都向服务器发送一次拉取资源请求,占用网络资源。大多数的浏览器都有一个并发请求数不能超过4个的限制。这意味着,如果一个网页里嵌入了过多的外部资源,这些请求会导致整个页面的加载延迟。而使用DataURL技术,图片数据以base64字符串格式嵌入到了页面中,与HTML成为一体,它的形式如下:
一堆base64的字符乱码 此处省略1万字
base64字符串中你看不出任何跟图片相关的东西,但下面,我们将传统的 img 写法和现在的Data URL用法左右对比显示,你就能看出它们是完全一样的效果。但实际上它们是不一样的,它们一个是引用了外部资源,一个是使用了Data URL。
1.2.4 优缺点分析
- 浏览器支持
几乎所有的现代浏览器都支持Data URL格式,包括火狐浏览器,谷歌浏览器,Safari浏览器,opera浏览器。IE8也支持,但有部分限制,IE9完全支持。 - 数据容量
Base64编码的数据体积是原数据的体积4/3,也就是DataURL形式的图片会比二进制格式的图片体积大1/3。 - 使用场景
DataURL形式的数据不会占用HTTP会话,所以再访问外部资源或当图片是在服务器端用程序动态生成时借用DataURL是一个不错的选择
1.3 Data URL实现用户头像上传
- 修改用户实体类,用户数据库表添加用户头像字段
- 使用基于Data URL的方式实现用户上传,实质是将前端上传的文件以Base64进行编码并且保存到数据库中。
- 用户controller中添加用户上传方法
- 用户service中添加上传文件处理的方法
- 在service中需要对文件进行base64编码,并且保存到数据库中
(1)在系统微服务的 UserController 中添加上传处理的方法
@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)在系统微服务的 UserService 中添加上传处理的方法
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;
}