layui 富文本编辑器layedit 以及图片转base64前端页面显示-Toy模板网

这篇具有很好参考价值的文章主要介绍了layui 富文本编辑器layedit 以及图片转base64前端页面显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

js

    var index = layui.layedit.build('noticeInformationContent', {
        area: ['500px', '400px'],
        uploadImage: {
            url: 'NI/uploadconimage' //接口url
            , type: 'POST' //默认post
        },
        hideTool: ['image']
    });

    layui.form.verify({
        content: function (val) {
            layui.layedit.sync(index);
            var content = layui.layedit.getContent(index);
            if (content.length > 1600) {
                return "内容不能超过1600字";
            }
        }
    })
    layui.form.render()

java


    @PostMapping("/NI/uploadconimage")
    public Map<String, Object> uploadconimage(MultipartFile file) {
        Map<String, Object> result = new HashMap<>();
        try (BufferedInputStream in = new BufferedInputStream(file.getInputStream());
             ByteArrayOutputStream out = new ByteArrayOutputStream()) {
            byte[] bytes = new byte[2 * 1024];
            int len;
            while ((len = in.read(bytes)) > 0) {
                out.write(bytes, 0, len);
            }
            byte[] byteArray = out.toByteArray();
            BASE64Encoder encoder = new BASE64Encoder();
            String encode = encoder.encode(byteArray);
            Map<String, Object> data = new HashMap<>();
            data.put("src", "data:image/jpg;base64," + encode);
            // data.put("src", "templetdata/static/images/banner.jpg");
            data.put("title", file.getOriginalFilename());
            result.put("code", 0);//重点:layui富文本不是code==200
            result.put("msg", "上传成功");
            result.put("data", data);
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            result.put("code", -1);
            result.put("msg", "上传失败!");
        }
        return result;
    }

文章来源地址https://www.toymoban.com/news/detail-699830.html

到了这里，关于layui 富文本编辑器layedit 以及图片转base64前端页面显示的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！