1、新建一个springboot项目,添加依赖
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
<version>1.25.2-RELEASE</version>
</dependency>
2、修改配置
# 上传文件总的最大值
spring.servlet.multipart.max-request-size=10MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=10MB
fdfs.soTimeout=1500
fdfs.connectTimeout=600
fdfs.thumbImage.width=150
fdfs.thumbImage.height=150
fdfs.trackerList[0]=192.168.25.133:22122 #文件服务器的位置
fdfs.prefixpath=http://192.168.25.133/ #自定义配置
3、启动类上加上
@Import(FdfsClientConfig.class)
// 解决jmx重复注册bean的问题
@EnableMBeanExport(registration = RegistrationPolicy.IGNORE_EXISTING)
4、编写controller
@RestController
@CrossOrigin("*")
public class FileUploadController {
@Autowired
private FastFileStorageClient client;
@Value("${fdfs.prefixpath}")
private String prefixpath;
@PostMapping("/upload")
public AppResult upload(MultipartFile myfile){
//1 获得扩张名
String exname = myfile.getOriginalFilename().substring(myfile.getOriginalFilename().lastIndexOf(".")+1);
// 1 上传文件的io
// 2 文件的大小
// 4 文件其他信息
// 返回 保存的路径(对象)
StorePath storePath = null;
AppResult result = null;
try {
storePath = client.uploadFile(myfile.getInputStream(),
myfile.getSize(), exname,null);
String url = prefixpath + storePath.getFullPath();
result = new AppResult(true,200,"上传成功",url);
} catch (IOException e) {
e.printStackTrace();
result = new AppResult(false,500,"上传失败",null);
}
//String url = prefixpath+storePath.getFullPath();
// 就是在保存在fastdfs 上的路径
// System.out.println(storePath.getFullPath());
//return url;
return result;
}
}
5、编写前端
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#httpServletRequest.getContextPath()+'/'}">
<meta charset="UTF-8">
<title>Title</title>
<style>
.ylp{
visibility: hidden;
}
</style>
</head>
<body>
<h2>添加内容页面</h2>
<form method="post" id="upfrm" enctype="multipart/form-data">
<p>
图片:
<input type="file" name="myfile"/>
<input type="hidden" name="pic">
</p>
<p id="ylp" class="ylp">
预览:
<a href="" id="yla" target="_blank"><img src="" width="20px" height="20px" id="ylm"></a>
</p>
</form>
</body>
<script th:src="@{/static/lib/jquery/jquery-1.8.3.min.js}"></script>
<script th:src="@{/static/lib/other/jquery-form.js}"></script>
<script>
// 选择一个图片
// 已选中一张图片马上就上传到服务器中
$(":file[name='myfile']").on('change',function(event){
// 获得文件的扩张名
var fs = this.value.split(".");
var ext = fs[fs.length-1];
if(!(ext=='jpg'||ext=='png')){
alert("请选中图片");
return;
}
var $frm = $("#upfrm");
//2 选中要提交的form
var options = {
url:'http://localhost:8070/upload',
type:'post',
success:function(jsondata){
alert(jsondata.message);
if(jsondata.keycode==200){
$("#ylp").removeClass("ylp");
$(":hidden[name='pic']").val(jsondata.data);
$("#ylm").prop("src",jsondata.data);
$("#yla").prop("href",jsondata.data);
}
}
};
$frm.ajaxSubmit(options);
})
</script>
</html>