最近公司网站改版,个人负责后台管理系统的开发,其实内容比较简单,前台展示页面大部分为静态页面,后台管理系统负责文章内容的编写和文章分类管理和标签的分类。在进行内容编辑的时候采用了wangEditor富文本编辑,在使用过程中图片多张上传时遇到了一个坑:
editor.customConfig.customUploadImg = function (files, insert) {
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
// 上传代码返回结果之后,将图片插入到编辑器中
insert(imgUrl)
}
自定义上传图片方法,因为要上传到公司资源服务器,在自定义方法中使用ajax向后台提交数据,
public Map<String, Object> upload(@RequestParam(value = "files", required = false) MultipartFile[] files, HttpServletRequest request)
使用MulitpartFile[] 数组无法接受参数,报500错误
后来将前端请求方法加以修改
wEditor.customConfig.customUploadImg = function (files, insert) {
var daw = new FormData();
for(var i=0;i<files.length;i++){
daw.append("files",files[i]);
}
index = layer.load(1, {
shade: [0.1,'#fff'] //0.1透明度的白色背景
});
$.ajax({
url:"${pageContext.request.contextPath}/content/upload",
type: "POST",
data: daw,
async: false,
cache: false,
contentType: false,
processData: false,
success:function(da){
layer.close(index);
if(da.errno == 0){
for(var j=0;j<da.data.length;j++){
insert(da.data[j]);
}
}else{
alert(da.msg);
return;
}
},
});
}
用FormData将图片文件拼接,然后通过post方式传递给后端
public Map<String, Object> upload(@RequestParam(value = "files", required = false) List<MultipartFile> files, HttpServletRequest request) {
Map<String, Object> resultMap = Maps.newHashMap();
String imgUrls[] = new String[files.size()];
try{
if(files != null&&files.size()>0){
for (int i = 0; i < files.size(); i++) {
String imgUrl = SFTPUtil.uploadMultipartFile(files.get(i));//上传文件
imgUrls[i] = imgUrl;
}
}
resultMap.put("errno", 0);
resultMap.put("data", imgUrls);
}
后端通过list来接收前端传递的参数,然后遍历list逐个上传到资源服务器,将返回的图片链接放在数组中,通过json字符串再返回给前端。
使用wangEditor的小结:
轻量、配置引用简单,但是因为是前端文档,自定义跟后端交互的方法时所描写的说明较为简单,并不涉及到后端的相关描述,不免给人有些疑惑