一·图片的存储的两种解决方案：
1.保存到服务器文件夹，数据库中保存图片路径。
比较适合图片不是非常重要的情况，比如在论坛上发几张图。就没有必要把图存到数据库里，只要把图片存到服务器的文件夹，进行命名，再把这个名字存在数据库的对应字段。
2.保存到数据库的blob字段上
这个是真的要把图片保存到数据库的对应字段上，比如说：身份证的照片。
保存在文件夹，数据库备份的时候是没法备份的，图片没法跟着走
blob: binary large object 在mysql中4G
(tinyblob 255字节, smallblob 64k,mediumblob (16M)… …)
做word或者图片上传还是倾向使用mediumblob
clob: character large object（字符型大对象）
数据库相关的字符串字段是varchar (8000)，它最多只能到8000个字符，就不能用来保存红楼梦之类的。这时使用clob，有些数据库叫text。
二·
1·修改Student
给domain增加一个属性，用以保存学生照片
照片以字节数组来存储，在domain下Student添加，属性“stuPic”：
private byte[] stuPic;//学生照片
添加Getter和Setter：
2·修改数据库表结构
复制原来的docs到stuinfo下：
修改内容为：
create table tbl_student(
stu_no int primary key,
stu_name varchar(30) not null,
stu_age decimal(5,2) not null
);
alter table tbl_student add stu_pic mediumblob;数据库已经有数据了，只能以修改的方式来增加一个图片存储字段。修改数据库表结构用alter，修改数据用update。允许空，原来是有记录的。
登入进数据库,进行修改:
查看结果，为了不删掉数据，允许空，不提供照片也可以：
3·修改网页模态窗与设置默认图片
在创建学生时如何发送图片信息呢？
现在我们只有学生学号，学生姓名和学生成绩：
在其中添加：
<div class="form-group">
<label>学生照片</label>
<input type="file" class="form-control-file" name="stuPic">
</div>
效果：
点击“选择文件”按钮出现选择文件的窗口。是因为我们有一个类型是file。
找一张默认照片：
随便找一张：
当用户没有提供照片时就显示这张照片。在resources下新建文件夹“pics”：
把图片命名为“default.png”贴到pics下：
访问“http://localhost:8080/stuinfo/resources/pics/default.png”就可以看到这张图了：
这张图的分辨率是390x388。
在学生照片的div上添加：
<img src="/stuinfo/resources/pics/default.png" width="150px" height="150px">效果：
但是选择文件没办法产生预览，只会这样子显示：
在list_student.jsp的script处添加：
// 传进来的部件就是文件域
function previewImage(file){
//获得这个图片
var img = document.getElementById('picImg');
//首先要判断文件域有没有文件，如果有文件，就说明你选择里一个文案要上传了。确认file有文件，且第一个文件不为空，做相关的事情。就开始其读数据
if (file.files && file.files[0])
{
//1·准备数据读取器
//准备一个文件读取器对象，并告诉它文件读取完毕之后要做什么。
var reader = new FileReader();
//成功读取了图片信息后，把读取结果赋予
//2·告诉数据读取器，读完之后要做什么
//FileReader.readAsDataURL()
//开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
reader.onload = function(evt){//onload告诉他文件读取完毕后干什么，“=”后面是一个回调函数
img.src= evt.target.result;//当读取完毕之后，把读到的内容赋给src，放到img身上来，就是赋予这个输入控件。就是把这个输入控件读到的数据往img上赋值。从而将img原来的src的值替代掉。实现了预览效果。
console.log("read ok! img src get value!"+evt.target.result);//打印出read ok
}
//3·开始去读
console.log("start to read!")
reader.readAsDataURL(file.files[0]);
}
else{
//如果没有内容的话就用默认值
img.src="/stuinfo/resources/pics/default.png";
// alert("no upload file!");
}
}这个脚本的目标是预览图片：
1·var img = document.getElementById('picImg');获得这个图片
给img一个id：
修改img为：<img id="picImg" src="/stuinfo/resources/pics/default.png" width="150px" height="150px"/>
2·修改input，添加onchange="previewImage(this)"：
<input type="file" class="form-control-file" name="stuPic" onchange="previewImage(this)">“previewImage(this)”是将当前这个输入控件当做参数传到函数里面去
测试：
查看控制台：
可以看到打印出了一堆图片的信息，以64进制来显示的2进制，这样非常长的2进制显示出来会比较小。
不想选了，点击“选择文件”按钮，到选择文件界面，直接点击取消。就会到了原来的默认图片。
4·数据落地
要使数据落地还需要两个库，fileupload和io：
在pom.xml中添加：
<!-- https://mvnrepository.com/artifact/commons-fileupload/commons-fileupload -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.3</version>
</dependency>fileupload会把io带进来。他们是层级依赖：
青色框的部分是会自动封装进去的，但是红色框的呢？
准备一个多段文件用来接收多段提交的东西，
多段提交：如果要提交的网页中，是有包含文件上传域的，那么编码模式必须设成多段提交。
因为要保存的数据体积是很大的，他必须分成多段来慢慢送。
在list_student.jsp的新生注册模态窗如下位置添加enctype="multipart/form-data"：
来到控制器：
在“createStudent”方法的参数上加上MultipartFile stuPic：
在方法内加一句stu.setStuPic(stuPic.getBytes());：
就可以了。
那么对于表单上传上来的文件，我们准备好一个多段文件,文件名和网页上的name是一致的：
它就会自动的传上去之后，在“createStudent”方法中作为参数被解析出来。把字节都取出来，填充的字段上。接下来是保存。
保存
保存时是Dao层，Dao层的实现类是没有的，要去修改映射文件
来到StudentMapper，修改addStu：
<insert id="addStu" parameterType="Student">
insert into tbl_student
values(#{stuNo},#{stuName},#{stuMark},#{stuPic})
</insert>我们是按照顺序写的，所以没有必要写出字段名。到时候会从Student中取到stuPic送到对应字段上。
字节数组映射到blob字段是Mybatis所支持的。要不然要对框架进行定制，根据框架提供的插件开发机制，使用接口，在框架上再配置一下。
测试：
来到控制器设个断点：
点击“新生注册”
他还是空。
现在，我们的表单已经设成了多段，控制器中也准备了多段文件。
那么，表单中的file类型的输入控件，怎么样才能变成学生控制器中的多段文件呢？要提供一个部件，让springmvc知道怎么处理多段提交的文件。
在dispatcher-servlet.xml添加：
<!-- 遇到多段提交数据，一律使用这个解析器去处理，其会调用commons-fileupload去解决问题 -->
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!--上传文件的最大大小，单位为字节 -->
<property name="maxUploadSize" value="17367648787"></property>
<!-- 上传文件的编码 -->
<property name="defaultEncoding" value="UTF-8"></property>
</bean>必须要加上多段解析器，否则springmvc将无法对多段数据进行处理。定义了一个springmvc所用的bean，只要是多段提交，这个bean都将被启动。
因为学生的属性是“stuPic”和网页的name的“stuPic”是同名的，他优先往学生的字段里面送。系统就不写了。
将网页的name的“stuPic”更名为“stuPhoto”，同时，将控制器中的多段文件名也改为“stuPhoto”
测试：
在debug窗口可以看到：
在网页可以看到：
图片并没有在网页列表中显示，在mysql中可以看到：
后面的字段是图片。
接下来是图片怎么在网页显示出来
将图片放在姓名上面，
修改list_student.jsp：
原来：
现在：
效果：
调小一点：
现在暂时都用默认图片，那么怎么把图片从数据库取出来呢？
到Dao层进行一定处理
在StudentDao添加：
byte[] getPicByStuNo(int stuNo);接下来就是写映射文件
在StudentMapper.xml添加：
<select id="getPicByStuNo" parameterType="int" resultType="byte[]">
select stu_pic
from tbl_student
where stu_no=#{stuNo}
</select>传进来的是整型参数，传出去都是字节数组，
在Service层进行修改：
在StudentService添加：
byte[] loadStuPhoto(int stuNo);在StudentServiceImpl实现一下：
@Override
public byte[] loadStuPhoto(int stuNo) {
return stuDao.getPicByStuNo(stuNo);
}回到springmvc，回到控制器：
要加载某个学生的照片，在专门写一个方法，需要HTTPResponse来做这个事情，在参数上写就好：
@GetMapping("/students/{stuNo}/photo")
public String loadStuPic(@PathVariable int stuNo,HttpServletResponse response) throws Exception{
byte[] data = stuService.loadStuPhoto(stuNo);
//MIME类型，在正式发送之前，要告诉他我发送的是什么东西。MIME是网页上的规范化文件识别机制，前面是大类型（image），后面是小类型（jpeg）。然后他就做好准备了，准备接收二进制数据，接收完二进制之后就以图片的方式去理解，就显示出图片了。
response.setContentType("image/jpeg");
ServletOutputStream sos=response.getOutputStream();
sos.write(data);
sos.flush();
sos.close();
return null;
}HTTPResponse是通向浏览器的一个通道。
如果是这样的路径就会取到这个学生的照片
测试：
访问：http://localhost:8080/stuinfo/students/110/photo
来到StudentMapper，添加resultMap：
修改，并添加：
创建了一个resultMap，这个resultMap返回回来的类型是一个Map，整个resultMap的ID叫picMap。
要查的是“stu_pic”字段，用这个org.apache.ibatis.type.BlobTypeHandler转化器去转，转完之后以imgBytes为key存到java.util.Map里面去。
大致为：
<select id="getPicByStuNo" parameterType="int" resultMap="picMap">
select stu_pic
from tbl_student
where stu_no=#{stuNo}
</select>
<!--
mediumblob -> byte[] 利用BlobTypeHandler，自定义转换器
type="java.util.Map" 返回的类型是key/value键值对存储的map
column="stu_pic" 取的字段
property="imgBytes" map中的key
-->
<resultMap type="java.util.Map" id="picMap">
<id column="stu_pic" property="imgBytes" typeHandler="org.apache.ibatis.type.BlobTypeHandler"/>
</resultMap>修改StudentDao：
修改StudentServiceImpl：
@Override
public byte[] loadStuPhoto(int stuNo) {
return (byte[])stuDao.getPicByStuNo(stuNo).get("imgBytes");
}测试：
要将mediumblob转成byte[] 但是不能自动转 ，所以利用Mybatis提供的类型转换器 BlobTypeHandler，如果以后的转化Mybatis没有提供就要自定义转换器。就是“MyBatis自定义类型处理器 TypeHandler”
type="java.util.Map" 返回的类型是key/value键值对存储的map
column="stu_pic" 取的字段
property="imgBytes" map中的key
在插入时可以直接在旁边写上类型转换器：
结果转换就不行了，要写resultMap了。
我们原来的返回值是一个我们自定的类型（Student），但是返回一张照片的话是什么类型？什么类型都不是，所以使用resultMap后返回值是（picMap），是key/value键值对存储的map：
现在还要考虑没有图的情况
在StudentServiceImpl中修改：
@Override
public byte[] loadStuPhoto(int stuNo) {
Map picMap = stuDao.getPicByStuNo(stuNo);
if(picMap!=null)
return (byte[])picMap.get("imgBytes");
else {
return null;
}
}在控制器中修改：
@GetMapping("/students/{stuNo}/photo")
public String loadStuPic(@PathVariable int stuNo,HttpServletResponse response) throws Exception{
//这样就得到了数据了
byte[] data = stuService.loadStuPhoto(stuNo);
//数据怎么带回去是一个问题
if(data!=null) {
//给response设置一下返回什么东西
response.setContentType("image/jpeg");
//从response身上得到一个输出流
ServletOutputStream sos = response.getOutputStream();
sos.write(data);
sos.flush();
sos.close();
}else {
System.out.println("no image");
}
//上面已经把数据输出去了，就没有必要return了
return null;
}在list_student中修改：
在list的位置：
<img src="/stuinfo/students/${stu.stuNo}/photo" width="100px" height="100px"/>拼装路径。
效果：
新增：
那么 ，没有图的怎么办呢？
在没有图片时，采取的方法是使用默认图片：
对控制器部分修改：
@GetMapping("/students/{stuNo}/photo")
public String loadStuPic(@PathVariable int stuNo,HttpServletRequest request,HttpServletResponse response) throws Exception{
//这样就得到了数据了
byte[] data = stuService.loadStuPhoto(stuNo);
if(data==null || data.length==0){//去取数据，发现什么都没取到，说明是没东西的。将默认图片替换进去。下面再去读是data是一定有东西的。
String defaultPicPath = request.getRealPath("/")+"resources/pics/default.png"; //获取网址“pics/default.png”，真实磁盘路径。“request.getRealPath("/")”是获取当前web应用程序所对应的根路径所对应的物理路径
FileInputStream fis =new FileInputStream(defaultPicPath);//创建一个文件输入流，把文件读取出来
data=new byte[fis.available()];//根据文件体积大小，创建字节数组
fis.read(data);//从fis中读出数据存到data中来，data就拥有了默认图片的数据
fis.close();
}
//数据怎么带回去是一个问题
//给response设置一下返回什么东西
response.setContentType("image/jpeg");
//从response身上得到一个输出流
ServletOutputStream sos = response.getOutputStream();
sos.write(data);
sos.flush();
sos.close();
//上面已经把数据输出去了，就没有必要return了
return null;
}data的数据获取方式只有两个，无论怎样都有数据：
效果：
第二种方法是在网页端判断是否有图片。
在修改学生时，显示图片：
在update_student添加：
<div class="form-group">
<label>学生照片:</label><br>
<img class="my-3" src="/stuinfo/students/${stu.stuNo}/photo" width="100px" height="100px"/>
<input type="file" class="form-control-file" name="stuPhoto"><!-- 用EL表达式来回填的 -->
</div>
测试：
增加修改完图片的预览：
在update_student开头添加：
function previewImage(file){
//获得这个图片
var img = document.getElementById('picImg');
//确认file有文件，且第一个文件不为空，做相关的事情
if (file.files && file.files[0])
{
//准备一个文件读取器对象，并告诉它文件读取完毕之后要做什么。
var reader = new FileReader();
//成功读取了图片信息后，把读取结果赋予
//FileReader.readAsDataURL()
//开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
reader.onload = function(evt){
img.src= evt.target.result;
console.log("read ok! img src get value!"+evt.target.result);
}
console.log("start to read!")
reader.readAsDataURL(file.files[0]);
}
else{
img.src="/stuinfo/resources/pics/default.png";
// alert("no upload file!");
}
}修改图片显示，大致如下：
<div class="form-group">
<label>学生照片:</label><br>
<img id="picImg" class="my-3" src="/stuinfo/students/${stu.stuNo}/photo" width="100px" height="100px"/>
<input type="file" class="form-control-file" name="stuPhoto" onchange="previewImage(this)"><!-- 用EL表达式来回填的 -->
</div>
测试：
现在只是预览，还没有上传上去，接下来，实现上传：
PUT提交不支持，要加上多段，没有多段解析器处理不来：
Mapper那边存的时候是自动处理的。
修改update_student:
enctype="multipart/form-data"
修改控制器：
@PutMapping("/students/{stuNo}")
public String updateStudent(Student stu, @PathVariable int stuNo,MultipartFile stuPhoto) throws Exception{
if(stuPhoto!=null)
stu.setStuPic(stuPhoto.getBytes());
stuService.updateStudent(stu);
return "redirect:/students";
}测试：
在多个页面都要用到预览的脚本，那就将其做成外挂的模式：
在静态资源文件夹resources下，新建js文件夹，在其下新建common.js，将重复的脚本复制进来：
在list_student.jsp添加：
<script type="text/javascript"
src="/stuinfo/resources/js/common.js"></script>
来到修改界面：
添加：
删除原来的脚本。
测试：
点的到：
测试预览OK。在多段提交时，过滤器没有办法把post提交转换成put提交。
现在把update_student.jsp的put提交拿掉：
回到学生控制器：
将修改的PUT提交给为post提交：
检查没有发现提交方式与网址和这个方法相同的情况。没有冲突。
测试填充数据能不能修改：
改了。
但是现在如果只是修改名字，照片不改：
原因：
如果没有选择照片，就是空。
来到控制器：
修改判断条件，判断是有东西的我才往里面塞。
否则就是用户并没有去修改照片，认为照片没有问题，直接用数据库里的照片就好了。再把数据库的照片取出来填上。最理想的方式是
：在修改时没有更新图片时，sql的：
这个部分就不生成。就不会修改照片了。这就是动态sql语句。
@PostMapping("/students/{stuNo}")
public String updateStudent(Student stu, @PathVariable int stuNo,MultipartFile stuPhoto) throws Exception{
if(stuPhoto.getBytes()!=null&&stuPhoto.getBytes().length>0)
stu.setStuPic(stuPhoto.getBytes());
else {
stu.setStuPic(stuService.loadStuPhoto(stuNo));
}
stuService.updateStudent(stu);
return "redirect:/students";
}测试没有修改的情况下是OK的。
