wangEditor图片批量上传

最近公司改版，个人负责后台管理系统的开发，其实内容比较简单，前台展示页面大部分为静态页面，后台管理系统负责文章内容的编写和文章分类管理和标签的分类。在进行内容编辑的时候采用了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的小结：

轻量、配置引用简单，但是因为是前端文档，自定义跟后端交互的方法时所描写的说明较为简单，并不涉及到后端的相关描述，不免给人有些疑惑

wangEditor图片批量上传

猜你喜欢