天天看点

SpringBoot + Vue (四)文件上传 + 拦截器

作者:黄斌杰
SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器

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

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

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

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

SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器

中的file 名字相同

SpringBoot + Vue (四)文件上传 + 拦截器

具体操作演示:

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

SpringBoot + Vue (四)文件上传 + 拦截器

在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

SpringBoot + Vue (四)文件上传 + 拦截器

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

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

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

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

SpringBoot + Vue (四)文件上传 + 拦截器

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

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

SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器
SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器

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

SpringBoot + Vue (四)文件上传 + 拦截器

代码如下:

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类中配置