springboot实现上传图片到服务器，前端及java后台代码总结

后台代码
@RequestMapping(value = “/image/save-test”, method = RequestMethod.POST)
@ResponseBody
public JsonResult upLoadImg(@RequestParam(“images”) MultipartFile file, HttpServletRequest request) throws IOException {
// 设置文件上传后的路径
String filePath = getFtpPath() + rootPath;
// 获取文件名后缀名
String suffix = file.getOriginalFilename();
//创建文件路径
File dest = new File(filePath + suffix);
// 检测是否存在目录
if (!dest.getParentFile().exists()) {
//假如文件不存在即重新创建新的文件已防止异常发生
dest.getParentFile().mkdirs();
}
try {
//方法将上传文件写到服务器上指定的文件
file.transferTo(dest);
String directory = dest.getCanonicalPath();
CabinetEntity entity1 = new CabinetEntity();
entity1.setImgPath(directory);
return JsonResult.jsonResultOK();
} catch (Exception e) {
logger.error(“上传失败”, e);
return JsonResult.jsonResultERROR(“上传失败”);
}
}
前台代码
html
图片：

js
$("#img").fileinput({
language : ‘zh’,
uploadUrl : $rootScope.getWaySystemApi+’/image/save-test’,
showUpload: true, //是否显示上传按钮
showRemove : true, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
autoReplace : true,
minFileCount: 0,
uploadAsync: true,
maxFileCount: 10,//最大上传数量
browseOnZoneClick: true,
msgFilesTooMany: “选择上传的文件数量 超过允许的最大数值！”,
//enctype: ‘multipart/form-data’,
// overwriteInitial: false,//不覆盖已上传的图片
allowedFileExtensions : [ “jpg”, “png”, “gif” ],
browseClass : “btn btn-primary”, //按钮样式
previewFileIcon : “”
}).on(“fileuploaded”, function(e, data) {//文件上传成功的回调函数，还有其他的一些回调函数，比如上传之前…
console.log(“上传成功”);
});
$("#img").change(function(){
var file = this.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件
reader.onloadend = function (e) {
// 图片base64
$scope.data[0].base = e.target.result;
};
}
});