个人资源与分享网站：/
1.页面结构
<script src="../statics/js/plugins/summernote/summernote.js"></script>
<script src="../statics/js/plugins/summernote/summernote-zh-CN.min.js"></script>
<div class="form-group col-lg-8">
<input id="content" name="content" type="hidden" value='${article.content }'/>
<label class="control-label col-lg-3">内容：</label>
<div class="col-sm-11">
<div class="ibox-content no-padding">
<div id="content_sn" class="summernote"></div>
</div>
</div>
</div>
2.js
$().ready(function() {
$('.summernote').summernote({
height : '220px',
lang : 'zh-CN',
callbacks: {
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
});
var content = $("#content").val();
console.log(content);
$('#content_sn').summernote('code', content);
});
//编辑器新增的ajax上传图片函数
function sendFile(files, editor, $editable) {
var size = files[0].size;
if((size / 1024 / 1024) > 2) {
alert("图片大小不能超过2M...");
return false;
}
console.log("size="+size);
var formData = new FormData();
formData.append("file", files[0]);
$.ajax({
data : formData,
type : "POST",
url : "/file/upload", // 图片上传出来的url，返回的是图片上传后的路径，http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
$('.summernote').summernote('insertImage',data.fileName);
alert("上传成功");
},
error:function(){
alert("上传失败");
}
});
function save(status) {
// $("#status").val(status);
var content_sn = $("#content_sn").summernote('code');
$("#content").val(content_sn);
console.log($("#content").val());
console.log();
$.ajax({
cache : true,
type : "POST",
url : "/article/save",
data : $('#signupForm').serialize(),// 你的formid
async : false,
error : function(request) {
parent.layer.alert("Connection error");
},
success : function(r) {
if (r.code == 0) {
// parent.layer.msg(r.msg);
// parent.reLoad();
//$("#cid").val(r.cid);
layer.msg("发布成功");
} else {
parent.layer.alert(r.msg)
}
}
});
}
3.
@ResponseBody
@PostMapping("/upload")
public R upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
String fileName = file.getOriginalFilename();
fileName = FileUtil.renameToUUID(fileName);
File sysFile = new File(FileType.fileType(fileName), "/files/" + fileName, new Date());
try {
FileUtil.uploadFile(file.getBytes(), saveFilePath, fileName);
} catch (Exception e) {
return R.error();
}
fileService.save(sysFile);
return R.ok().put("fileName", sysFile.getUrl());
}
如果觉得《使用summernote实现复制图片即可实现图片上传》对你有帮助，请点赞、收藏，并留下你的观点哦！
