在添加页面创建多图片上传组件
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('新增博客')"/>
<th:block th:include="include :: bootstrap-fileinput-css"/>
head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-tbBlogs-add">
<div class="form-group">
<label class="col-sm-3 control-label">博客封面：label>
<div class="col-sm-8">
<input id="blogsCoverImgFile" name="blogsCoverImgFile" type="file" multiple>
<input type="hidden" name="blogsCoverImg" id="relativePath" value="">
<input type="hidden" name="blogsCoverImgUrl" id="absolutePath" value="">
div>
div>
form>
div>
<div class="row">
<div class="col-sm-offset-5 col-sm-10">
<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check">i>保 存
button>
<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all">i>关 闭
button>
div>
div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script type="text/javascript">
var prefix = ctx + "platform/tbBlogs"
$("#form-tbBlogs-add").validate({
onkeyup: false,
rules: {
xxxx: {
required: true,
},
},
focusCleanup: true
});
function submitHandler() {
if ($.validate.form()) {
$.operate.saveTab(prefix + "/add", $('#form-tbBlogs-add').serialize());
}
}
$("#blogsCoverImgFile").fileinput({
'theme': 'explorer-fas',
'uploadUrl': "/common/multiUpload",
uploadAsync: true,
overwriteInitial: false,
enctype: 'multipart/form-data',
allowedFileExtensions: ["jpg", "jpeg", "png", "gif"],
showUpload: true,
showRemove: false,
maxFileCount: 4,
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
showCaption: true,
showPreview: true,
maxFileSize: 51200,
})
var relativePaths = []
var absolutePaths = [];
var arrayObject = [];
$('#blogsCoverImgFile').on('fileuploaded', function (e, params, previewId) {
console.log('打印日志', e, params, previewId);
var resultData = params.response.data[0];
if (params.response.code === 0) {
relativePaths.push(resultData.fileName)
absolutePaths.push(resultData.url)
arrayObject.push({"keyId": previewId, "relativePath": resultData.fileName, "absolutePath": resultData.url})
$("#relativePath").val(relativePaths.join(","))
$("#absolutePath").val(absolutePaths.join(","))
}
});
$('#blogsCoverImgFile').on('filesuccessremove', function (event, key, previewId) {
debugger
console.log("删除" + event, key, previewId)
console.log("循环遍历数组对象" + arrayObject)
for (var a = 0; a < arrayObject.length; a++) {
if (arrayObject[a].keyId === key) {
var relativePath = arrayObject[a].relativePath;
var absolutePath = arrayObject[a].absolutePath;
console.log("相对路径和绝对路径" + relativePath + absolutePath)
$.post("/common/deleteImageUrl", {
imageURL: relativePath
}, function (result) {
if (result.code === 0) {
for (var i = 0; i < relativePaths.length; i++) {
if (relativePath == relativePaths[i]) {
relativePaths.splice(i, 1)
}
}
for (var i = 0; i < absolutePaths.length; i++) {
if (absolutePath == absolutePaths[i]) {
absolutePaths.splice(i, 1)
}
}
$("#relativePath").val(relativePaths.join(","))
$("#absolutePath").val(absolutePaths.join(","))
} else {
$.modal.alertWarning(result.msg)
}
})
}
}
});
script>
body>
html>
java后台接收图片服务
@PostMapping("/common/multiUpload")
@ResponseBody
public AjaxResult uploadMultipartFile(@RequestParam MultipartFile[] blogsCoverImgFile) throws Exception {
List<Map<String, Object>> listMap = new ArrayList<>();
try {
for (MultipartFile file : blogsCoverImgFile) {
String filePath = Global.getUploadPath();
String fileName = FileUploadUtils.upload(filePath, file);
String url = serverConfig.getUrl() + UPLOAD_PATH + fileName;
Map<String, Object> map = new HashMap<>();
map.put("fileName", fileName);
map.put("url", url);
listMap.add(map);
}
return AjaxResult.success(listMap);
} catch (Exception e) {
return AjaxResult.warn(e.getMessage());
}
}
删除上传成功后的图片
@PostMapping("/common/deleteImageUrl")
@ResponseBody
public AjaxResult deleteImgeByUrl(String imageURL) {
boolean result=false;
try {
String[] imageUrlArray = imageURL.split(",");
for(String imageUrl:imageUrlArray){
String filePath = Global.getUploadPath();
String absoluteURL= filePath + imageUrl;
File file=new File(absoluteURL);
if(file.exists() && file.isFile()) {
result = file.delete();
}
}
if(result){
return AjaxResult.success("删除成功");
}else {
return AjaxResult.error("删除失败！");
}
} catch (Exception e) {
return AjaxResult.warn(e.getMessage());
}
}
