温馨提示
Spring Boot会员管理系统的中，需要涉及到Spring框架，SpringMVC框架，Hibernate框架，thymeleaf模板引擎。所以，可以学习下这些知识。当然，直接入门的话使用是没问题，但是，涉及到一些异常和原理的话可能就有些困难。
1. 前端部分
在前端部分addMember.html是通过form表单来提交会员的信息，其中就包括了图片上传功能（这里涉及了文件上传操作），表单部分代码如下：
<form th:action="@{/admin/addMember}" method="post" enctype="multipart/form-data" id="addMember">
<div class="file-field input-field">
<div class="btn">
<span>选择头像文件</span>
<input id="file" type="file" name="iconPath" multiple="" placeholder="选择文件" accept="image/*" onchange="changeToop()">
</div>
<div class="file-path-wrapper">
<!--<input class="file-path validate" type="text" placeholder="Upload one or more files">-->
<img id="myimg" src="assets/iconPath/common.jpg" class="img-responsive img-thumbnail" style="width: 20%;height: 20%" />
</div>
<!--头像文件上传预览-->
<script>
function Id(id){
return document.getElementById(id);
}
function changeToop(){
var file = Id("file");
if(file.value===''){
//设置默认图片
Id("myimg").src='assets/iconPath/common.jpg';
}else{
preImg("file","myimg");
}
}
//获取input[file]图片的url Important
function getFileUrl(fileId) {
var url;
var file = Id(fileId);
var agent = navigator.userAgent;
if (agent.indexOf("MSIE")>=1) {
url = file.value;
} else if(agent.indexOf("Firefox")>0) {
url = window.URL.createObjectURL(file.files.item(0));
} else if(agent.indexOf("Chrome")>0) {
url = window.URL.createObjectURL(file.files.item(0));
}
return url;
}
//读取图片后预览
function preImg(fileId,imgId) {
var imgPre =Id(imgId);
imgPre.src = getFileUrl(fileId);
}
</script>
</div>
.......
</form>
这里有一个注意事项：因为涉及文件上传，所以在form中需要加入enctype="multipart/form-data"，而且就是input中的name属性是与后端中的Controller映射方法的传入参数名是一一对应的。
2. 后端代码实现
后端中对于SpringMVC框架可以对于文件进行处理然后我们可以通过传入参数的方式来接收文件
2.1 Controller处理传入文件
代码如下：
@PostMapping("/addMember")
public String addMember(Member member, String gradeName, MultipartFile icon, Map<String, Object> model) {
//处理上传文件
try {
if (icon == null)//首先判断上传文件不为null
return "error";
if (icon.getOriginalFilename().equals("")) //如果上传文件的原名为空字符串，则证明使用了默认图像
member.setIconPath("/assets/icon/common.jpg"); //设置为我们的默认图像路径
else
//这里通过了自己编写的文件上传工具类来处理上传的MultipartFile，文件名设置为通过UUID产生的字符串
member.setIconPath(FileUploadUtil.upload(icon, "/assets/icon/", UUIDRandomUtil.get32UUID()));
} catch (Exception e) {
e.printStackTrace();
return "error";
}
.......
return "addMemberSuccess";
}
2.2 FileUploadUtil工具类保存文件
在Controller的MultipartFile文件传入后需要进一步，转变为FIle并且保存到磁盘当中，所以我分开处理，把Controller的传入文件交给FileUploadUtil工具类来处理，具体的代码如下：
public class FileUploadUtil {
/**
* 上传文件
* @param multipartFile multipartFile
* @param prefixPath 前缀路径
* @param fileName 上传后的文件名
* @return 上传后最终的相对路径+文件名
* @throws Exception 有可能空指针异常和IO异常
*/
public static String upload(MultipartFile multipartFile, String prefixPath, String fileName) throws Exception {
//得出上传的绝对路径
String uploadPath = ClassUtils.getDefaultClassLoader().getResource("").getPath() +"/static"+ prefixPath;
File file = new File(uploadPath);
if (!file.exists())
if (file.mkdirs())
System.out.println("成功创建目录");
//获取上传的后缀名
String suffixName = multipartFile.getOriginalFilename().substring(multipartFile.getOriginalFilename().lastIndexOf("."));
//新建最终确定的文件
file = new File(uploadPath+fileName+suffixName);
multipartFile.transferTo(file);
return prefixPath+fileName+suffixName;
}
}
上面中的ClassUtils是Spring提供的一个工具类，而调用方法getDefaultClassLoader().getResource("").getPath()是获取当前项目classpath下的路径。