本篇文章主要讲解,使用java、springboot、thymeleaf实现本地存储的配置和上传实例页的实现操作。
日期:2024年3月17日
作者:任聪聪
教程附件:https://download.csdn.net/download/hj960511/88980428
一、实际效果
磁盘情况:
二、前置操作
说明:在我们制作这个实例之前,我们需要前往阿里云的maven构建工具,进行构建一个项目包,当然在idea中也同样可以。
步骤一、打开阿里云maven构建工具
在线工具地址:https://start.aliyun.com/
步骤二、查看自己的java版本,并构建合适的配置
构建配置信息:
注意:选择相互兼容的版本来规避,springboot版本和java版本的兼容性问题。
步骤三、配置应用架构信息
步骤四、点击底部获取代码
步骤五、导入项目到idea中,如下,采用git的方法。
操作说明:如果没有安装git建议直接使用zip进行解压缩,然后导入到ieda项目中。
备注:找到自己的开发目录,复制粘贴命令并执行即可完成操作。
步骤六、使用idea打开目录,如下打开idea后,选择open
在弹出的框中,点击选择自己所需的项目目录。
完成导入,进入下一环节!
三、实现本地文件上传
说明:这一小节我们将对本地文件上传的实例的实际开发工作做详细的说明,从项目加载开始,到文件实现上传。
步骤一、打开项目后,耐性等待,build构建完毕
完毕后:记得mvn install
项目目录下生成target才算成功!
步骤二、打开src\main\java
发现控制器我们会看到他们的包名是没有创建!
步骤三、创建一个包,com.fileLocalDemo.demos.web。
说明:此处右键选中java目录即可进行创建
创建完成:
备注:记得把所有应用这个包的控制器都拖入到这个包目录下!
步骤四、创建一个名为UploadFileController的文件,如下。
填写新文件名称:
创建完毕:
步骤五、书写我们的upload视图
1.配置thymeleaf的主要模板信息
路径:src\main\resources\application.properties
# 模板编码
spring.thymeleaf.encoding=UTF-8
# 要被排除在解析之外的视图名称列表,⽤逗号分隔
spring.thymeleaf.excluded-view-names=
# 要运⽤于模板之上的模板模式。另⻅ StandardTemplate-ModeHandlers( 默认值: HTML5)
spring.thymeleaf.mode=HTML5
# 在构建 URL 时添加到视图名称前的前缀(默认值: classpath:/templates/ )
spring.thymeleaf.prefix=classpath:/templates/
# 在构建 URL 时添加到视图名称后的后缀(默认值: .html )
spring.thymeleaf.suffix=.html
2.新建模板目录
3.新建一个名为upload.html的模板文件如下:
4.创建后,进行模板文件内容的填充:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JAVA实现mvc架构的本地文件上传存储的实例教程</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.form-container {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="form-container">
<h2>上传文件</h2>
<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="file" /> <!-- 文件上传输入框 -->
<button type="button" onclick="submitForm()">提交</button> <!-- 提交按钮,点击时调用submitForm函数 -->
</form>
</div>
<script>
function submitForm() {
var form = document.getElementById('uploadForm');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
alert(xhr.responseText); // 弹出上传成功并显示后台返回的字符串
};
xhr.send(formData);
}
</script>
</body>
</html>
注意:<html xmlns:th="http://www.thymeleaf.org">
很重要,关系到了你的页面是否能够显示正确。
5.创建我们的uploadController的web视图文件:
填充内容:
package com.fileLocalDemo.demos.web;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class UploadFileController {
@GetMapping("/upload")
public String ShowUploadFile() {
return "upload.html";
}
}
步骤六、构建上传接口服务
1.创建service中缺少的目录如下:
鼠标右键菜单选择目录。
在弹出框中选择这四个:
目录创建完毕后:
2.目录创建完毕后,选择创建包 com.fileLocalDemo.service.controller
:
3.创建controller的服务接口UploadFileApiController
UploadFileApiController文件内容:
package com.fileLocalDemo.service.controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@RestController
public class UploadFileApiController {
@PostMapping("/upload")
public String uploadFile(@RequestParam("file") MultipartFile file) {
try {
// 检查文件类型和大小
String contentType = file.getContentType();
if (!contentType.equals("image/jpeg") && !contentType.equals("image/png")) {
return "仅支持jpeg和png图片";
}
// 此处检测大小,单位mb,getSize为字节
if (file.getSize() > 1048576) { // 1MB
return "文件大小不能超过1MB";
}
// 设置上传目录
String uploadDir = "E:\\testFileLocalUpload\\";
// 生成随机文件名
String newFileName = UUID.randomUUID().toString() + "_" + file.getOriginalFilename();
String filePath = uploadDir + File.separator + newFileName;
// 创建文件存储目录
File newFile = new File(filePath);
if (!newFile.getParentFile().exists()) {
newFile.getParentFile().mkdirs();
}
// 将文件保存到指定路径
file.transferTo(newFile);
return filePath; // 返回文件路径
} catch (IOException e) {
e.printStackTrace();
return "文件上传失败";
}
}
}
注意:不要两个路径都是get方式会无法加载,如果自己实在运行不了或者实现不同这个实例教程,建议直接下载附件边看边学。
四、运行实例,调试上传
步骤一、进入到我们的start目录,找到启动文件如下图:
步骤二、直接运行,打开前台 localhost:8080,即可进行提交操作测试 。
注意:此处第一次需要配置sdk,上述的所有项目步骤都必须优先通过idea进行配置sdk的操作。【详见常见问题】
五、常见问题
1.提交报错文件上传过大限制报错无效的问题:
说明:必须要在配置文件中配置如下的文件上传信息,才可生效超大文件上传时的报错提示
# 设置最大文件上传限制为10MB
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
2.运行demo报错时
在终端中执行依赖更新即可:
mvn clean install -U
如果还是解决不了,直接选择更低版本的springboot框架,建议2.7及以下或者升级java到21版本,或者重新构建相互兼容的springboot版本和java版本的项目包。
3.明明删掉了控制器,但是还是可以访问,或出现报错一直无法修复的情况,看这个。
说明:这是由于没有从新使用maven进行构建的原因,只需要执行mvn install
即可完成构建。