使用summernote实现复制图片即可实现图片上传

你的名字 2021-09-24 09:32 585阅读 0赞

个人资源与分享网站：[http://xiaocaoshare.com/][http_xiaocaoshare.com]

1.页面结构

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("上传失败");  
        \}  
    \});

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

[http_xiaocaoshare.com]: http://xiaocaoshare.com/