1.图片上传
var E = window.wangEditor
var editor = new E('#editorMenu','#editor')
//开启debug模式
editor.customConfig.debug = true;
// 关闭粘贴内容中的样式
editor.customConfig.pasteFilterStyle = false
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = true
// 使用 base64 保存图片
//editor.customConfig.uploadImgShowBase64 = true
// 上传图片到服务器
editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称
editor.customConfig.uploadImgServer = 'upload'; //设置上传文件的服务器路径
editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024; // 将图片大小限制为 3M
editor.customConfig.uploadImgMaxLength = 5;
editor.customConfig.uploadImgHooks = {
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
}
}
后台代码
@Data
public class WangEditor {
private Integer errno; //错误代码,0 表示没有错误。
private String[] data; //已上传的图片路径
public WangEditor(String[] data) {
super();
this.errno = 0;
this.data = data;
}
}
@RequestMapping(value = "/upload",method=RequestMethod.POST)
@ResponseBody
public WangEditor uploadFile(
@RequestParam("myFile") MultipartFile multipartFile,
HttpServletRequest request) {
try {
// 获取项目路径
String realPath = request.getSession().getServletContext()
.getRealPath("");
InputStream inputStream = multipartFile.getInputStream();
String contextPath = request.getServletContext().getContextPath();
// 服务器根目录的路径
String path = realPath.replace(contextPath.substring(1),"");
// 根目录下新建文件夹upload,存放上传图片
String uploadPath = path + "upload";
// 获取文件名称
String filename = Calendar.getInstance().getTimeInMillis()+"image";
// 将文件上传的服务器根目录下的upload文件夹
File file = new File(uploadPath, filename);
FileUtils.copyInputStreamToFile(inputStream, file);
// 返回图片访问路径
String url = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + "/upload/" + filename;
String [] strs = {url};
WangEditor we = new WangEditor(strs);
return we;
} catch (IOException e) {
logger.error("上传文件失败", e);
}
return null;
}
2.多图片上传
editor.customConfig.customUploadImg = function (files, insert) {
var data= new FormData();
for(var i=0;i<files.length;i++){
data.append("files",files[i]);
}
$.ajax({
url:basePath + 'uploadFile/wangEditUploadImag',
type: "POST",
data: data,
success:function(da){
if(da.errno == 0){
for(var j=0;j<da.data.length;j++){
insert(da.data[j]);
}
}else{
alert(da.msg);
return;
}
}
});
}
@RequestMapping(value = "/upload1",method=RequestMethod.POST)
@ResponseBody
public WangEditor uploadFile(
@RequestParam("files") MultipartFile[] files,
HttpServletRequest request) {
try {
List list = new ArrayList();
for(MultipartFile multipartFile:files) {
// 获取项目路径
String realPath = request.getSession().getServletContext()
.getRealPath("");
InputStream inputStream = multipartFile.getInputStream();
//String contextPath = request.getServletContext().getContextPath();
//logger.info(contextPath);
// 服务器根目录的路径
String path = realPath;
// 根目录下新建文件夹upload,存放上传图片
String uploadPath = path + "upload";
// 获取文件名称
String filename = Calendar.getInstance().getTimeInMillis()+"image";
// 将文件上传的服务器根目录下的upload文件夹
File file = new File(uploadPath, filename);
FileUtils.copyInputStreamToFile(inputStream, file);
// 返回图片访问路径
String url = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + "/upload/" + filename;
list.add(url);
}
//ArrayList<String> list=new ArrayList<String>();
String[] strings = new String[list.size()];
list.toArray(strings);
WangEditor we = new WangEditor(strings);
return we;
} catch (IOException e) {
logger.error("上传文件失败", e);
}
return null;
}