SpringBoot[01]springboot创建，图片文件上传显示，设置UUID
软件环境
| 软件 | 软件版本 |
|---|---|
| IDEA | 2020.2 |
| JDK | 1.8 |
springboot创建
IDEA创建Spring Initalizr项目
选择本机的JDK版本，选择Default starter service URL 点击next
设置Group、Artifact（全小写英文），选择本机的JDK版本
选择Web，勾选Spring Web，点击next，点击finish
（group.artifact作为项目java目录内的包名）
所创建的项目与选择JDK版本与本机不一致
点击file→Project Structure→Modules，点击Language level选择本机版本（JDK1.8选择8），点击Dependencis→Moudule SDK选择本机的JDK版本，点击OK
点击file→Setting→Build, Execution, Deployment→Compiler→Java Compiler→在当前项目行点击Target bytecode version列，选择本机的JDK版本，点击OK
选择本机的JDK版本，点击OK
删除.mvn目录、.gitignore、HELP.md、mvnw、mvnw.cmd
pom.xml
pom.xml添加相关依赖
在dependencies标签中添加
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!--sringboot热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!--tomcat-->
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<scope>provided</scope>
</dependency>
<!--javax.servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.0</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
build标签
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
java
Springboot01Application.java
java目录的group.artifact目录是artifactnameApplication.java文件（程序的入口）
后续创建的相关java文件最高与该文件同级（分层新建的package与此java文件同级）
MyController.java
在src/main/java目录的group.artifact目录下创建controller层
在controller层中创建MyController.java
为MyController类添加Controller注解映射
在MyController类中写RequestMapping(“ok”)注解映射并写出方法返回到ok.jsp页面
@Controller
public class MyController {
@RequestMapping("ok")
public String ok(){
return "ok";
}
}
resources
static
resources/static目录下可以放置一些静态资源，比如html页面
index.html
在static目录下创建index.html文件
<!--body内容-->
<h1>首页</h1>
在Application.java文件中启动项目，若控制台中无错误信息，且出现Started信息，则项目启动成功
打开浏览器
地址栏输入http://localhost:8080/回车，显示index.html页面，页面中显示首页
application.properties
视图解析器接管前缀后缀
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp
application.yml
在resources目录新建application.yml
application.yml与application.properties等效，实际应用中任选其中一种即可
在application.yml输入与application.properties相同的配置内容，自动转成yml显示格式
spring:
mvc:
view:
prefix: /
suffix: .jsp
本次笔记后续仍以application.properties配置
webapp
创建在项目的src/main目录下创建webapp目录，并将其设置为webapp目录
右键main新建目录webapp
点击file→Project Structure→Modules，展开当前项目，点击web，在右下角Web Resource Directories，点击＋，在弹窗中点击右侧的Browse（文件夹图标），显示当前项目目录，依次展开src/main，选择webapp，点击OK，点击OK，点击OK
在webapp目录下创建WEB-INF目录
ok.jsp
右键webapp新建JSP文件，命名为OK
<!--body内容-->
<h1>OK页面</h1>
index.html
在index.html添加a标签链接ok
<a href="/ok">ok页面</a><br>
浏览器验证
启动项目
浏览器地址栏输入http://localhost:8080/回车进入index页面，点击ok页面，跳转至ok.jsp
图片上传以及显示
application.properties
设置最大上传文件大小
spring.servlet.multipart.max-file-size=5MB
设置最大上传文件为5MB，这里若不写单位写纯数字，则以byte为单位
second.html
在resources/static目录下创建second.html，添加上传图片表单
指定上传图片的链接为upload
<!--body内容-->
<h1>second：上传图片</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
上传文件：<input type="file" name="file"><br/>
<input type="submit" value="上传文件">
</form>
index.html
index页面中添加访问上传图片页的链接
<a href="second.html">second上传图片</a><br>
MyController.java
在MyController.java中编写upload注解映射方法，上传图片
@RequestMapping("upload")
public String upload(@RequestParam(name="file") MultipartFile file, HttpSession session) throws IOException {
//获取target/classes/目录绝对路径
String target_classes_path = ClassUtils.getDefaultClassLoader().getResource("").getPath();
String path=target_classes_path.substring(1,target_classes_path.length());
//设置图片上传后相对路径
String img_path="/image/"+file.getOriginalFilename();
File f1=new File(path+"static/image/"+file.getOriginalFilename());
file.transferTo(f1);
session.setAttribute("img",img_path);
return "show";
}
注：需要在target/classes/static/目录下手动创建image目录！
变量target_classes_path由于受视图映射影响（spring.mvc.view.prefix=/），路径字符串首位是一个/
需要使用substring截取正确部分(1,target_classes_path.length())作为target/classes/目录的绝对路径
图片上传后会存放到项目的target/classes/static/image/下
网页文件编译后与target/classes/static/同级，网页取图片文件路径只需取相对路径即可（路径范围在项目目录内）
上传图片需要用到绝对路径，网页中加载图片需要用到相对路径
路径与原文件名拼接而成的字符串分别作为上传图片的路径和加载图片的路径
传递加载图片的路径setAttribute的key设为img
转到show.jsp页面
show.jsp
右键webapp新建show.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="${img}">
</body>
</html>
设置接收EL表达式，用img标签显示图片
验证
浏览器验证
启动项目
浏览器地址栏输入http://localhost:8080/回车进入index页面，点击second上传图片
进入second.html上传图片页面，点击选择文件，选择一个小于5MB的图片文件，点击确定，点击上传文件
页面跳转至show页面，并显示所上传的文件
target
在项目的/target/classes/static/image目录下出现所上传的图片文件
图片上传以及显示（Ajax）
在resources/static目录下创建jq目录，在jq目录中放置jQuery文件（jQuery-3.4.1.js）
注意：将resources/static/jq复制到target/classses/static目录下
upload.html
在resources/static目录下创建upload.html，添加上传图片表单，添加img标签，用于上传后的显示
添加javascript语句进行相应ajax操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jq/jQuery-3.4.1.js" type="text/javascript"></script>
<script>
// 文档被加载之后的执行函数
$(function () {
$("#btn_up").click(function () {
var fdata = new FormData($("#f_up")[0]);
//ajax请求数据
$.ajax({
url: "/uploadimg",
data: fdata,
type: "post",
cache: false,
processData: false,
contentType: false,
success: function (data) {
alert(data);
$("#img_01").attr("src","image/"+data);
}
})
})
})
</script>
</head>
<body>
<!--文件上传-->
<form id="f_up" enctype="multipart/form-data">
文件：<input type="file" name="myfile"><br>
<input id="btn_up" type="button" value="上传">
</form>
<img src="#" id="img_01">
</body>
</html>
设置uploadimg为映射链接
index.html
index页面中添加访问上传图片页的链接
<a href="second.html">second上传图片</a><br>
MyController.java
在MyController.java中添加链接uploadimg的方法
@RequestMapping("/uploadimg")
@ResponseBody
public String uploadfile(@RequestParam MultipartFile myfile){
boolean flag=false;
String filename = myfile.getOriginalFilename();
String image_path = ClassUtils.getDefaultClassLoader().getResource("static/image").getPath();
String path=image_path.substring(1,image_path.length());
try {
myfile.transferTo(new File(path+"/"+filename));
flag=true;
} catch (IOException e) {
e.printStackTrace();
}
String out=flag?filename:"upload fail!";
return out;
}
设置@ResponseBody注解后，页面跳转失效，改为当前页面内的数据传送
也可以在类的@Controller注解修改为@RestController
修改为@RestController的效果是
类中所有的@RequestMapping方法均不会页面跳转，全部修改为页面内的数据传送
uploadfile方法中，若图片上传成功则返回当前图片的文件名，否则返回upload fail!
验证
浏览器验证
启动项目
浏览器地址栏输入http://localhost:8080/回车进入index页面，点击ajax上传图片
上传成功
进入upload.html上传图片页面，点击选择文件，选择一个小于5MB的图片文件，点击确定，点击上传文件
页面弹窗当前图片文件名，页面中上传图片表格下方显示所上传的图片
target
若上传成功，则在项目的/target/classes/static/image目录下出现所上传的图片文件
若上传失败，/target/classes/static/image目录下没有新的图片文件
设置UUID
当上传同名的图片文件时，新上传的图片会将已经上传的同名文件覆盖，为避免这一问题出现
引申出UUID（唯一标识符）
生成32位十六进制数xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx（8-4-4-4-12）
依靠UUID.randomUUID()方法生成一个uuid作为待上传文件的文件名
用str.replace("-", "")去除uuid表示格式中的-
下面以改写 图片上传以及显示（Ajax） 的MyController.java中的相关方法为例（uploadfile）
MyController.java
@RequestMapping("/uploadimg")
@ResponseBody
public String uploadfile(@RequestParam MultipartFile myfile){
boolean flag=false;
String originalFilename = myfile.getOriginalFilename();
//截取原文件名最后一个.作为文件后缀
int i = originalFilename.lastIndexOf(".");
String file_suf=originalFilename.substring(i,originalFilename.length());
String path = ClassUtils.getDefaultClassLoader().getResource("static/image").getPath();
UUID uuid = UUID.randomUUID();
String s = uuid.toString();
//32位十六进制数的uuid。原文件后缀作为上传文件的文件名
String filename = s.replace("-", "")+file_suf;
try {
myfile.transferTo(new File(path+"/"+filename));
flag=true;
} catch (IOException e) {
e.printStackTrace();
}
String out=flag?filename:"upload fail!";
return out;
}
验证
浏览器验证
启动项目
浏览器地址栏输入http://localhost:8080/回车进入index页面，点击ajax上传图片
上传成功
进入upload.html上传图片页面，点击选择文件，选择一个小于5MB的图片文件，点击确定，点击上传文件
页面弹窗当前图片生成的uuid.文件后缀，页面中上传图片表格下方显示所上传的图片
target
若上传成功，则在项目的/target/classes/static/image目录下出现所上传的图片文件（文件名为uuid.文件后缀）
若上传失败，/target/classes/static/image目录下没有新的图片文件
以上就是本期总结的全部内容，愿大家相互学习，共同进步！
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
