SpringBoot + Vue （四）文件上传 + 拦截器

将一张test.jpg的图片放到Static包下，然后在浏览器中输入localhost:8080/test.jpg 就可以看到这种图片了

注意：如果这个时候浏览器无法显示图片，先要清除一下Maven的Plugins。双击clean:clean，清除后刷新浏览器就可以看到了。

如果静态资源不想放在static下，可以设置过滤规则（虚拟路径）

这里设置虚拟路径images，这样再次访问test.jpg时就需要加入这个虚假路径 /images/test.jpg

如果不想放在static目录下，想自己建一个目录，就需要在applicationg.properties中加入一行代码

spring.web.resources.static-locations=classpath:/css

这时默认的本地静态资源路径就变成了/css

静态资源仅作为了解，前后端分离项目的静态资源不放在static目录下。

注意：下面代码中的 f 要和

中的file 名字相同

具体操作演示：

先在控制器里面新建一个FileUploadController的文件上传控制器

在FileUploadController控制器中，编写代码如下：

（注意，photo的数据类型为 MultipartFile，数据类型HttpServletRequest 为获取服务器地址）

@RestController

public class FileUploadController {

@PostMapping("/upload")

public String up (String nickname, MultipartFile photo, HttpServletRequest request) throws IOException {

System.out.println(nickname);

//获取图片文件名

System.out.println(photo.getOriginalFilename());

//获取文件类型

System.out.println(photo.getContentType());

String path = request.getServletContext().getRealPath("/upload");

System.out.println(path);

saveFile(photo,path);

return "上传成功";

}

private void saveFile(MultipartFile photo, String path) throws IOException {

// 判断存储的目录是否存在，如果不存在则创建

File dir = new File(path);

if (!dir.exists()){

//创建目录

dir.mkdir();

}

File file = new File(path+photo.getOriginalFilename());

photo.transferTo(file);

}

在Apipost 中进行测试，选择 form-data ;参数photo的类型选 File

上传文件默认是单个不超过1M，单次不超过10M。如果想要超过就需要在applictiong.properties中设置

spring.servlet.multipart.max-file-size=5MB

用户上传图片后，因为不再默认是static目录中所以不能直接在浏览器中显示，如果需要显示则需要另外配置：（本地测试阶段每次进入服务器的地址都不一样，所以会出现浏览器访问不到的情况，需要重新上传）

spring.web.resources.static-locations=/upload/

以后我们的程序会有很多控制器，这些控制器可能需要相同的操作，比如用户是否登录了。拦截器可以对请求中一些统一的操作做一个处理。

用户发过来的请求都可以先到拦截器，

流程：用户请求先过拦截器（preHandle方法）， 通过后在访问目标方法，目标方法调用后返回控制器（postHandle），再到页面显示出来，之后在回到拦截器（afterCompletion）。可以设置多个拦截器（下图就设置了3个拦截器）。

建一个类，一般以 Interceptor 结尾，并继承系统的 HandlerInterceptor 拦截器类，然后可以重写父类中的preHandle、postHandle、afterCompletion 三种方法。方法不用都重写，一般用preHandle方法。

拦截器需要进行注册否则不能使用。注册在java类中完成。新建一个java类（webconfigurer ）实现 webMvcconfigurer 接口

例如上图：设置路径，拦截user路径下的所有请求。具体操作：

代码如下：

public class LoginInterceptor implements HandlerInterceptor {

@Override

//request对应前端请求，response给前端返回对应的信息

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception{

System.out.println("LoginInterceptor");

return true;

}

这里不会自动生效，需要配置。一般是在config 包下的WebConfig类中配置