在工作中遇到了个挺有意思的需要：上传多个图片，修改信息页面的需要在原本上传的图片基础上新增其他图片，数据库存储的是图片地址拼接的字符串，记录一下
一、新增页面内容
1. HTML内容
<div class="form-group">
<label class="col-sm-3 control-label">上传图片：</label>
<div class="col-sm-8">
<input type="hidden" name="patrolImg" id="patrolImg1">
<div class="file-loading">
<input id="patrolImg" name="files" type="file" multiple>
</div>
</div>
</div>2.JS方法
// 多图上传
$("#patrolImg").fileinput({
uploadUrl: ctx + 'common/uploadImages',//上传方法路径
allowedFileTypes: ['image'],//上传文件类型
allowedFileExtensions: ['bmp', 'gif', 'jpg', 'jpeg', 'png'],//可上传文件后缀类型
uploadAsync: false//受否为异步上传
}).on('filebatchuploadsuccess', function (event, data, previewId, index) {
var rsp = data.response;
log.info("return urls：" + rsp.urls)
$("#patrolImg1").val(rsp.urls);//patrolImg1赋值图片保存地址
})3.collateral内容
因为是基于若依，所以直接把多个上传图片的方法写到已有的通用类 CommonController 中了
/**
* 通用上传请求（多个图片）
*/
@PostMapping("/uploadImages")
@ResponseBody
public AjaxResult uploadImages(List<MultipartFile> files) throws Exception
{
try
{
// 上传文件路径
String filePath = RuoYiConfig.getUploadPath();
List<String> urls = new ArrayList<String>();
List<String> fileNames = new ArrayList<String>();
List<String> newFileNames = new ArrayList<String>();
List<String> originalFilenames = new ArrayList<String>();
for (MultipartFile file : files)
{
// 上传并返回新文件名称
String fileName = FileUploadUtils.uploadImage(filePath, file);
String url = serverConfig.getUrl() + fileName;
urls.add(url);
fileNames.add(fileName);
newFileNames.add(FileUtils.getName(fileName));
originalFilenames.add(file.getOriginalFilename());
}
AjaxResult ajax = AjaxResult.success();
ajax.put("urls", StringUtils.join(urls, FILE_DELIMETER));
ajax.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));
ajax.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));
ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));
return ajax;
}
catch (Exception e)
{
return AjaxResult.error(e.getMessage());
}
}二、编辑页面内容
这部分比较有意思，需求是需要在原有的基础上进行修改或者增加，若依框架貌似没有实现该功能或者是我没有找到，就自己整了
1.HTML内容
<div class="form-group">
<label class="col-sm-3 control-label">上传图片：</label>
<div class="col-sm-8">
<input type="hidden" name="patrolImg" id="patrolImg" th:field="*{patrolImg}">
<div class="file-loading">
<input id="uploadfile" name="files" type="file" multiple>
</div>
</div>
</div>2.JS方法
//初始化文件预览数据和文件上传附件
initUpload();
//初始化方法
function initUpload() {
var logoUrl = $("#patrolImg").val();//拿到图片路径
var preList = new Array();
var initialPreviewConfig = new Array();
//设置初始化区域值
if (logoUrl!=null && logoUrl != ''){
var imgArr = logoUrl.split(",");
for ( var i = 0; i < imgArr.length; i++) {
preList[i] = imgArr[i]
var a = {
caption : '主图'+(i+1),
width: '120px',
url: '/common/del',
key: i,
extra: {url: imgArr[i]}
}
initialPreviewConfig.push(a);
}
}
$("#uploadfile").fileinput({
language: 'zh', //设置语言
uploadUrl: "/common/uploadImages", //上传的地址，改成自己的
allowedFileExtensions:['bmp', 'gif', 'jpg', 'jpeg', 'png'],//接收的文件后缀
initialPreviewAsData:true,
initialPreview:preList,//预览图片
uploadAsync: true, //默认异步上传
showUpload: true, //是否显示上传按钮
showRemove : false, //显示移除按钮
showPreview : true, //是否显示预览
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
maxFileCount: 4, //表示允许同时上传的最大文件个数
maxFileSize:10 *1024 *1024,
messages: {maxFileSize:'文件上传的最大大小为 10MB',acceptFileTypes:'此文件是不支持的图片格式' },
enctype: 'multipart/form-data',
validateInitialCount:true,
msgFilesTooMany:5,
autoReplace:false,
initialPreviewConfig:initialPreviewConfig
});
}
//导入文件上传完成之后的事件
$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {
var response = data.response;
$("#fileMd5").val(response.fileMd5);
$("#version").val(response.newVersionName);
$("#url").val(response.filePath);
var imgPath = $("#patrolImg").val();
if(imgPath!=null && imgPath !=''){
$("#patrolImg").val(imgPath+","+response.urls);
}else{
$("#patrolImg").val(response.urls);
}
$("#uploadfile").fileinput('destroy');//销毁fileUploadFileInput
initUpload();//重新初始化文件预览数据和文件上传附件
$('#uploadfile').fileinput('enable');//enable作用：destroy并重新初始化fileinput插件后，插件会处于disable状态
});
//删除方法
$('#uploadfile').on('filepredelete', function(event, key, jqXHR, data) { //就是在删除原图片之前触发，而新选择的图片不会触发。能满足我们的要求。
console.log('Key = ' + key);
var logoUrl = $("#patrolImg").val();
var urlLinkNew = '';
var imgArr = logoUrl.split(",");
for ( var i = 0; i < imgArr.length; i++) {
if (i == key) continue;
if (urlLinkNew !=''){
urlLinkNew = urlLinkNew + "," + imgArr[i];
}else{
urlLinkNew = imgArr[i];
}
}
$("#patrolImg").val(urlLinkNew);
console.log($("#patrolImg").val())
});3.collateral内容
这里定义一个del方法，用来处理已保存的图片可以被删除
@RequestMapping("/del")
@ResponseBody
public AjaxResult del(){
return AjaxResult.success();
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
