qq1696518615
୧((〃•̀ꇴ•〃))૭⁺✧
采纳率51.2%
2021-01-06 20:32

Sprongboot+wangEdit富文本编辑器上传图片问题

上传图片第一次上传不显示,但是图片却存到磁盘里了,然后再次上传就显示了...然后磁盘多了一张不同名字想同的图片

 <link href="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff" rel="stylesheet">
    <script src="https://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js"></script>




  <!--加载编辑器的容器-->
                <div id="editor">
                    <!--                            <p>开始记录你的成长!</p>-->
                </div>
                <textarea id="text1" name="content" style="width:100%; height:200px;display: none"></textarea>






<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#editor')
    var $text1 = $('#text1');
    editor.customConfig.onchange = function (html) {
        // 监控变化,同步更新到 textarea
        $text1.val(html)
    };
    editor.customConfig.uploadFileName = 'file';
    editor.customConfig.uploadImgServer = '/test/upload';
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    editor.customConfig.uploadImgMaxLength = 5;
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果,图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
            layer.msg('Ok');
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果,但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象

        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
            layer.msg('响应超时');
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
        // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
            // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
            // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
            var url = result.url
            console.log(result)
            console.log(url)
            insertImg(url)
            // result 必须是一个 JSON 格式字符串!!!否则报错
        }
    };
    editor.create();
    $text1.val(editor.txt.html())
</script>


这是我的js代码.各位老哥帮看一下是什么原因

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

相关推荐