大体思路
- 一般是用户将图片上传到服务器下的文件夹中,然后将图片的路径和文件名存入到数据库
- 由于用户自己保存的图片文件名可能和其他同名文件造成冲突,所以在这里我使用了UUID来生成随机的文件名
- PS:第一次写博客,有很多不懂的东西,望各位大佬看出问题来及时提出,勿喷,谢谢。
整体步骤
pom的相关配置
- 在这里我用的是FreeMarker,默认的视图模板后缀是ftl,习惯用jsp的也可以用jsp。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
<!--关于jpa的相关依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
application.properties相关配置
- 重点是上传图片大小的配置,另外两个是关于其他的配置。我看了下其他人的博客,在这里配置和我有些许不同,说实话我也不是很理解,有大佬看到的话可以解答一下。我这个文件配置是百度的,但复制过去它会报错,IDEA自己修复之后就这样了,不过我的可以正常使用。
#静态资源过滤策略
spring.resources.static-locations=classpath:/static/
#设置全局日期解析格式
spring.mvc.date-format=yyyy-MM-dd
#maxFileSize 是单个文件大小
spring.servlet.multipart.max-file-size=50MB
#maxRequestSize是设置总上传的数据大小
spring.servlet.multipart.max-request-size=50MB
Controller相关代码
- 新生成的文件名称和上传的文件路径我都写在Cortroller了。
@RequestMapping("/add")
public String upload(Stu stu,@RequestParam("file") MultipartFile file) throws IOException {
if(!file.isEmpty()) {
String path1=System.getProperty("user.dir")+"\\src\\main\\resources\\static";
String path2="\\upload";
String path=path1+path2;
String fileName = file.getOriginalFilename();
String uuidname= UUID.randomUUID().toString().replace("-","");
String getFileName = uuidname + fileName.substring(fileName.lastIndexOf("."));
File filepath = new File(path+getFileName);
if (!filepath.getParentFile().exists()) {
filepath.getParentFile().mkdirs();
}
file.transferTo(new File(path + File.separator + getFileName));
System.out.println("上传文件路径和图片名称:" + (path + File.separator + getFileName));
stu.setNewname(path2 + File.separator + getFileName);
}
stuService.add(stu);
return "redirect:stu";
}
页面
- 因为我做的是一个小型的后台项目,随便嵌套了一个后台模板,所以下面的代码带有一些div,可忽略,最重要的是form表单。
<form method="post" class="form-horizontal" action="add" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">图片</label>
<div class="col-sm-10">
<input type="file" class="form-control" name="file">
</div>
</div>
</form>
- 在这里上传图片,可以跳回自己定义的想让图片显示的地址。
- 图片显示,ftl里面的代码,我上传到数据库了,可能会和你们不大一样。
<td><img src="${stu.newname}" width="80" height="60"></td>
- OK了
- 文件夹也有。
多多交流,感谢。