zoukankan      html  css  js  c++  java
  • 笔记70 Spring Boot快速入门(八)(重要)

    上传文件

    一、方式一

    1.上传页面

    upLoadPage.html

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8"/>
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <h1>Thymeleaf</h1>
     9     <form action="upload" method="post" enctype="multipart/form-data">
    10         选择图片:<input type="file" name="file" accept="image/*"/><br/>
    11         <input type="submit" value="上传"/>
    12     </form>
    13 </body>
    14 </html>

    <1>. method="post" 是必须的
    <2>. enctype="multipart/form-data" 是必须的,表示提交二进制文件
    <3>. name="file" 是必须的,和后续服务端对应
    <4>. accept="image/*" 表示只选择图片

    2.上传文件页面跳转控制器,用来跳转到上传页面。

    1     @RequestMapping("upLoadPage")
    2     public String uploadPage(){
    3         return "upLoadPage";
    4     }

    3.上传文件控制器,用来上传文件,并跳转到显示页面。

     1     @RequestMapping(value = "/upload",method = RequestMethod.POST)
     2     public String upload(HttpServletRequest request, @RequestParam("file")MultipartFile file, Model model){
     3 
     4         try {
     5             String fileName=System.currentTimeMillis()+file.getOriginalFilename();
     6             String destFileName=request.getServletContext().getRealPath("")+"uploaded"+File.separator+fileName;
     7             File destFile=new File(destFileName);
     8             destFile.getParentFile().mkdirs();
     9             file.transferTo(destFile);
    10             //System.out.println(destFileName);
    11             model.addAttribute("fileName",fileName);
    12         }catch (FileNotFoundException e){
    13             e.printStackTrace();
    14             return "上传失败,"+e.getMessage();
    15         }catch (IOException e){
    16             e.printStackTrace();
    17             return "上传失败,"+e.getMessage();
    18         }
    19         return "showImage";
    20     }

    <1>. 接受上传的文件

    @RequestParam("file") MultipartFile file

    <2>. 根据时间戳创建新的文件名,这样即便是第二次上传相同名称的文件,也不会把第一次的文件覆盖了

    String fileName = System.currentTimeMillis()+file.getOriginalFilename();

    <3>. 通过req.getServletContext().getRealPath("") 获取当前项目的真实路径,然后拼接前面的文件名

    String destFileName=req.getServletContext().getRealPath("")+"uploaded"+File.separator+fileName;

    <4>. 第一次运行的时候,这个文件所在的目录往往是不存在的,这里需要创建一下目录

    File destFile = new File(destFileName);
    destFile.getParentFile().mkdirs();

    <5>. 把浏览器上传的文件复制到希望的位置

    file.transferTo(destFile);

    <6>. 把文件名放在model里,以便后续显示用

    model.addAttribute("fileName",fileName);

    4.显示页面

    showImage.html

     1 <!DOCTYPE html>
     2 <html lang="en" xmlns:th="http://www.thymeleaf.org">
     3 <head>
     4     <meta charset="UTF-8"/>
     5     <title>Title</title>
     6 </head>
     7 <body>
     8     <img th:src="@{/uploaded/{filename}(filename=${fileName})}"/>
     9 </body>
    10 </html>

    5.application.properties

    1 #spring.mvc.view.prefix=/WEB-INF/jsp/
    2 #spring.mvc.view.suffix=.jsp
    3 spring.http.multipart.max-file-size=10MB
    4 spring.http.multipart.max-request-size=10MB
    5 
    6 spring.thymeleaf.enabled=true
    7 
    8 server.port=5050

    设置上传文件的大小,默认是1m,太小了,文件稍微大一点就会出错。修改端口,启用thymeleaf模板

    6.测试

    文件的存储路径:

    二、方式二(将文件保存在项目目录下)

    1.在pom.xml增加依赖,使项目支持JSP。

     1         <!-- servlet依赖. -->
     2         <dependency>
     3             <groupId>javax.servlet</groupId>
     4             <artifactId>javax.servlet-api</artifactId>
     5 
     6         </dependency>
     7         <dependency>
     8             <groupId>javax.servlet</groupId>
     9             <artifactId>jstl</artifactId>
    10         </dependency>
    11         <dependency>
    12             <groupId>org.apache.tomcat.embed</groupId>
    13             <artifactId>tomcat-embed-jasper</artifactId>
    14         </dependency>

    2.在main目录下,新建-> webapp/WEB-INF/jsp 目录,用来存放视图。webapp存放视图和资源(上传的文件)

    3.showImage.jsp、upLoadPage.jsp中的内容直接把html中的复制过来即可。

    1 <%@ page language="java" contentType="text/html; charset=UTF-8"
    2     pageEncoding="UTF-8"%>
    3     
    4 <img src="/uploaded/${fileName}">

    4.application.properties中添加对jsp视图的解析路径,并将thymeleaf模板关闭。

    1 spring.mvc.view.prefix=/WEB-INF/jsp/
    2 spring.mvc.view.suffix=.jsp
    4.spring.thymeleaf.enabled=false

    5.测试

    上传文件所在位置:

    代码:https://github.com/lyj8330328/springboot-upload-demo

  • 相关阅读:
    springMVC后端返回数据到前端
    spring MVC配置
    SSM框架中配置静态资源加载
    js实践问题收集日记
    页面HTml学习笔记
    js页面传值实践
    struts2中jsp页面与action之间的传值
    json与Java对象的转换
    JDBC的简单应用
    新的开始,重新启用博客园
  • 原文地址:https://www.cnblogs.com/lyj-gyq/p/9351285.html
Copyright © 2011-2022 走看看