使用summernote實現複製圖片即可實現圖片上傳

個人資源與分享網站：http://xiaocaoshare.com/

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());
    }