flask和富文本编辑wangeditor的结合上传图片到本地

最新推荐文章于 2023-07-04 21:51:37 发布

Spider_man_

最新推荐文章于 2023-07-04 21:51:37 发布

阅读量600

点赞数

分类专栏： flask

本文链接：https://blog.csdn.net/chengmo123/article/details/104324838

版权

flask 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

wangeditor参考文档：https://www.kancloud.cn/wangfupeng/wangeditor2/113961

上传html页面

 <div class="aui-form-group clear">
                    <label class="aui-label-control">
                     内容 <em>*</em>
                    </label>
                    <div id="editor" class="aui-form-input">
                    </div>
 </div>
 <input type="hidden" name="contents" value="" id="cont">

上传js

   <script type="text/javascript" src="../static/js/blogging/wangEditor.min.js"></script>
    <script type="text/javascript">
        var E=window.wangEditor
        var editor=new E('#editor')
        //编辑器中的图片上传到本地
        editor.customConfig.customUploadImg = function (files, insert) {
            var formData=new FormData();
            formData.append('f',files[0]);
            $.ajax({
                type:'POST',
                url:"{{url_for('upload')}}",
                data:formData,
                contentType:false,
                processData:false,
                success:function(data){
                //将返回的本地地址插入到wangeditor中
                    insert(data)
                }

            })
        }

        // 时刻监控编辑器，将数据传递到隐藏域input
        var cont=$('#cont')
        editor.customConfig.onchange=function(html){
           cont.val(html)
        }
        editor.create()
        // 初始化input值
        cont.val(editor.txt.html())
        
    </script>

flask处理响应

UP_LOAD='app/static/upload/image'
SAVE_PATH='../static/upload/image'
DIR=os.path.join(os.getcwd(),UP_LOAD)


@app.route('/upload',methods=['POST'])
def upload():
    fobject=request.files.get('f')
    img_path=os.path.join(DIR,fobject.filename)
    fobject.save(img_path)
    save_path=os.path.join(SAVE_PATH,fobject.filename)
    return save_path

效果图：