有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

java 炮渣日记 2周前 (11-16) 16次浏览 已收录 0个评论 扫描二维码
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

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

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

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

中的file 名字相同

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

具体操作演示:

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

vue引入static目录下的文件(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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

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

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

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器
vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

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

vue引入static目录下的文件(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类中配置

vue引入static目录下的文件(SpringBoot + Vue)文件上传 + 拦截器

代码:

@Configuration
public class WebConfig implements WebMvcConfigurer {
    public void addInterceptors(InterceptorRegistry registry){
        //registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/user/**");
        //如果不调用具体路径.addPathPatterns("/user/**")则拦截所有
        registry.addInterceptor(new LoginInterceptor());
    }
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址