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

boyanx5个月前技术教程18




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

代码:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public void addInterceptors(InterceptorRegistry registry){
        //registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/user/**");
        //如果不调用具体路径.addPathPatterns("/user/**")则拦截所有
        registry.addInterceptor(new LoginInterceptor());
    }
}

相关文章

Vue 技术栈(全家桶)(vue技术栈有哪些)

Vue 技术栈(全家桶)尚硅谷前端研究院第 1 章:Vue 核心Vue 简介官网英文官网: https://vuejs.org/中文官网: https://cn.vuejs.org/介绍与描述动态构建...

Vue小知识:如何在前端处理上传文件

转载说明:原创不易,未经授权,谢绝任何形式的转载在开发前端应用程序时,有时我们可能需要允许用户上传图像文件。稍后,我们可以处理图像文件,并在必要时将其发送到后端进行进一步处理和存储。最常见的图像文件格...

Vue实现原理(图文讲解)(vue 实现原理)

本文章转自:乐字节文章主要讲解:Vue实现原理获取更多VUE相关资料及项目可以关注:B站 小王学Java1、Vue简介现在的大前端时代,是一个动荡纷争的时代,江湖中已经分成了很多门派,主要以Vue,R...

Vue进阶(幺伍肆):vue-resource(vue-resource.js)

前言vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,...

如何在Vue3中使用Nuxt进行服务端渲染开发?

服务端渲染SSR(Server-Side Rendering)是一种在服务器端生成网页内容的技术,这种实现方式与传统的客户端渲染CSR(Client-Side Rendering)有所不同。在SSR中...

Vue+Element UI实现断点续传、分片上传、秒传

作者:Pseudo 转发链接:https://segmentfault.com/a/1190000023434864凡是要知其然知其所以然文件上传相信很多朋友都有遇到过,那或许你也遇到过当上传大文件时...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。