第一步:下载summernote 这里就不多写了
第二步引用
<link href="../summernote/dist/summernote.css" rel="stylesheet"/>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
<script src="../summernote/dist/summernote.js"></script>
<script src="../summernote/dist/lang/summernote-zh-CN.js"></script> <!-- 中文-->
第三步:创建并配置图片上传
var summer = $('#summernote');
summer.summernote({
height: 300,
tabsize: 2,
lang: 'zh-CN',
callbacks: {
onImageUpload: function (blobInfo,editor, welEditable) {
sendFile(blobInfo,editor, welEditable);
}
}
});
function sendFile(blobInfo,editor, welEditable) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open("POST", "/Upload/multiUpload");
formData = new FormData();
formData.append("file", blobInfo[0]);
xhr.onload = function(path){
// var imgNode = document.createElement("img");
// imgNode.src = imgsrcpath()+ this.responseText;
summer.summernote('insertImage', imgsrcpath()+ this.responseText, 'image name');
};
xhr.send(formData);
}
第四步:后台接收
@ApiOperation(value="多文件上传",notes="多文件上传")
@ResponseBody
@RequestMapping(value="/multiUpload",method=RequestMethod.POST)
public String multiUpload(HttpServletRequest request) {
List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");
UUID uuid = UUID.randomUUID();
String filePath =env.getProperty("upload.filePath");
String fileName="";
File f = new File(filePath);
File fileParent = f.getParentFile();
if(!fileParent.exists()){
fileParent.mkdirs();
}
for (int i = 0; i < files.size(); i++) {
MultipartFile file = files.get(i);
if (file.isEmpty()) {
return "上传第" + (i++) + "个文件失败";
}
fileName = file.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf(".") + 1);
fileName =uuid+ "."+suffix;
File dest = new File(filePath + fileName);
try {
file.transferTo(dest);
LOGGER.info("第" + (i + 1) + "个文件上传成功");
} catch (IOException e) {
LOGGER.error(e.toString(), e);
return "上传第" + (i++) + "个文件失败";
}
}
return "/upload/" + fileName;
}
转载:https://blog.csdn.net/GoodChangYong/article/details/102016205
查看评论