一.SpringBoot配置静态文件访问
如果是不设置这个静态访问地址，上传的文件不会被访问到，而且如果不是用流来上传图片的话只能写绝对地址，如果用流上传文件的话，可以设置为当前项目，这样上传的时候，就会上传到当前项目目录下
package com.tms.tblog.infrastructure.config;
import org.springframework.boot.system.ApplicationHome;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import java.io.File;
@Configuration
public class WebMVCConfig implements WebMvcConfigurer {
//对静态资源的配置
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/**").addResourceLocations("classpath:/static/", "classpath:/test", "file:" + "upload");
ApplicationHome h = new ApplicationHome(getClass());
File jarF = h.getSource();
String dirPath = jarF.getParentFile().toString() + "/upload/";
registry.addResourceHandler("/upload/**").addResourceLocations("file:" + dirPath);
}
}
二.编写一个上传文件的代码
1.编写一个控制器用来接收上传文件的接口Controller
package com.tms.tblog.controller;
import com.tms.tblog.dto.ResultDto;
import com.tms.tblog.infrastructure.untils.FileUtil;
import io.swagger.annotations.Api;
import lombok.extern.log4j.Log4j2;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
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.util.UUID;
@Api(tags = "上传")
@RestController
@Log4j2
@RequestMapping("/tblog/upload")
public class UploadController {
//头像上传
@PostMapping("/upload")
public ResultDto uploadAvatar(@RequestParam("files") MultipartFile file) {
if (file.isEmpty()) {
return new ResultDto("1", "请选择文件", null);
}
//保存地址
String pathName = "upload/img/";
File filePath = new File(pathName);
// 判断目录是否存在，如果不存在,创建文件目录
if (!filePath.exists() && !filePath.isDirectory()) {
System.out.println("目录不存在，创建目录:" + filePath);
filePath.mkdirs();
}
//获取文件名（包括后缀）
String uploadName = file.getOriginalFilename();
// 取得文件名后缀
String suffix = uploadName.substring(uploadName.lastIndexOf(".") + 1);
// 获取文件名去掉后缀
String fileName = uploadName.substring(0, uploadName.lastIndexOf("."));
// 定义一个uuid用来保存图片的名字，也可以根据自己的需求来定义保存文件的名字
UUID uuid = UUID.randomUUID();
// 全文件路径名
String pathFullName = pathName + fileName + "_" + uuid.toString() + "." + suffix;
return FileUtil.saveFile(file, pathFullName);
}
}
2.编写一个文件工具类，用来编写文件相关操作的共通方法FileUtil
package com.tms.tblog.infrastructure.untils;
import com.tms.tblog.dto.ResultDto;
import org.springframework.web.multipart.MultipartFile;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
public class FileUtil {
/**
* 保存文件（文件流）
*
* @param file 文件
* @param pathFullName 保存路径
* @return
*/
public static ResultDto saveFile(MultipartFile file, String pathFullName) {
FileOutputStream fos = null;
try {
fos = new FileOutputStream(pathFullName);
fos.write(file.getBytes()); // 写入文件
Map map = new HashMap();
map.put("url", pathFullName);
return new ResultDto("0", "上传成功", map);
} catch (Exception e) {
e.printStackTrace();
return new ResultDto("0", "上传失败", null);
} finally {
try {
fos.close();
} catch (IOException e) {
e.printStackTrace();
return new ResultDto("0", "上传失败", null);
}
}
}
}
三.编写一个测试前台，展示效果
1.编写前端代码，采用简单的layui的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>登录界面</title>
<link rel="stylesheet" href="/lib/layui/css/layui.css">
<script src="/lib/layui/layui.js"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
</head>
<body>
<h1>登录界面</h1>
<div class="layui-input-block">
<form action="" class="layui-form" enctype="multipart/form-data" method="post">
<input type="hidden" name="blogImg" id="imgPath" value="">
<div class="form-group"><label>图片上传</label>
<input type='file' style='margin:5px;' name='files' required><br>
<button type="button" class="layui-btn" id="img_upload">上传图片</button>
</div>
<input type="submit">
</form>
</div>
<script>
// 提交菜单
layui.use(['upload', 'layer', 'form'], function () {
var form = layui.form;
var upload = layui.upload;
//普通图片上传
$('#img_upload').click(function () {
var formData = new FormData();//获取选择的文件
$.each($('input[name="files"]'), function (index, item) {
formData.append("files", item.files[0])
});//发送异步请求
$.ajax({
method: 'post',
url: '/tblog/upload/upload',//文件上传接口
data: formData,
processData: false,
contentType: false,
success: function (data) {//成功返回触发的方法
$('#imgPath').val(data);
alert("上传成功");
},//请求失败触发的方法
error: function () {
alert("上传失败");
}
});
});
});
</script>
</body>
</html>
2.最后效果
评论