Springboot + wangEditor 整合图片上传（完整）

最新推荐文章于 2023-11-27 17:11:36 发布

Teng_is_a_littlebird

最新推荐文章于 2023-11-27 17:11:36 发布

阅读量1.8k

点赞数 2

分类专栏： springboot 文本编辑器图片上传文章标签： springboot 图片上传 wangEditor

本文链接：https://blog.csdn.net/Teng_is_a_littlebird/article/details/92773101

版权

springboot 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

文本编辑器

1 篇文章 0 订阅

订阅专栏

图片上传

1 篇文章 0 订阅

订阅专栏

页面：index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .toolbar {
            border: 1px solid #ccc;
        }

        .text {
            border: 1px solid #ccc;
            height: 400px;
        }
</style>
</head>
<body>
<div id="div1" class="toolbar"></div>
<div style="padding: 5px 0; color: #ccc">请在下方编辑区输入文章文章内容</div>
<div id="div2" class="text">
    <!--可使用 min-height 实现编辑区域自动增加高度-->
</div>

<!-- 修改.js目录位置 -->
<script type="text/javascript" src="/js/wangEditor.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器
    // editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = '/test/upload'
    // 将图片大小限制为 3M
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 自定义上传参数
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgHooks = {
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert : function(insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            var url = result.url
            insertImg(url)
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    }
    // 必须放到有关于编辑器设置前面
    editor.create()

</script>
</body>
</html>

一个ImgInfo类（存返回的数据）

import java.util.Arrays;

public class ImgInfo {

    private Integer error;
    private String[] url;

    public Integer getError() {
        return error;
    }

    public void setError(Integer error) {
        this.error = error;
    }

    public String[] getUrl() {
        return url;
    }

    public void setUrl(String[] url) {
        this.url = url;
    }

    @Override
    public String toString() {
        return "ImgInfo [error=" + error + ", url=" + Arrays.toString(url) + "]";
    }

}

controller类，添加上传文件的方法

@RequestMapping("/test/upload")
    @ResponseBody
    public ImgInfo setImgUrl(MultipartFile file, HttpServletResponse response, HttpServletRequest request)
            throws Exception {
        // Get the file and save it somewhere
        byte[] bytes = file.getBytes();
//        System.out.println(new String(bytes));
        String path = request.getServletContext().getRealPath("/image/");
        File imgFile = new File(path);
        if (!imgFile.exists()) {
            imgFile.mkdirs();
        }
        String fileName = file.getOriginalFilename();// 文件名称
        System.out.println(path + fileName);

        try (FileOutputStream fos = new FileOutputStream(new File(path + fileName))) {
            int len = 0;
            fos.write(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        }

        String value = "http://localhost:8080/image/" + fileName;
        String[] values = { value };

        ImgInfo imgInfo = new ImgInfo();
        imgInfo.setError(0);
        imgInfo.setUrl(values);

        System.out.println(imgInfo.toString());
        return imgInfo;
    }

项目展示：
上传图片：
在这里插入图片描述
控制台打印数据

Teng_is_a_littlebird

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
Springboot + wangEditor 整合图片上传（完整）

页面：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .toolbar { ...
复制链接

扫一扫