flask_ckeditor上传图片在目录保存成功后，http返回显示upload failed.

HelloFlask Flask Web 开发实战
1

1、背景
一个简单的博客程序，使用flask_admin作为后台管理，Flask-CKEditor (version:0.4.3）作为博客内容的编辑器，目前文章提交功能均正常，上传图片可以保存，但是http回显一直返回上传失败，没有找到原因。

2、代码样例

  • 配置文件
    basedir = os.path.abspath(os.path.dirname(__file__))

    UPLOAD_DIR= os.path.join(basedir,'uploads')
    BOOTSTRAP_SERVE_LOCAL=True
    CKEDITOR_SERVE_LOCAL=True
    CKEDITOR_PKG_TYPE='standard'
    CKEDITOR_FILE_UPLOADER = '/admin/upload/'
  • 后台文件上传处理函数
class IndexView(AdminIndexView):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    @expose('/')
    def index(self):
        if not login.current_user.is_authenticated:
            return redirect(url_for('admin.login'))

        return self.render('admin/index.html')

.......省略............

    @expose('/upload/', methods=['POST'])
    @ckeditor.uploader
    def upload(self):
        f = request.files.get('upload')
        if not allowed_file(f.filename):
            return upload_fail(message='Image only!')

        filename = secure_filename(f.filename)
        f.save(os.path.join(current_app.config['UPLOAD_DIR'], filename))
        url = url_for('admin.uploaded', filename=filename)
        return url



    @expose('/uploads/<filename>')
    def uploaded(self, filename):
        path = current_app.config['UPLOAD_DIR']
        #print(path)
        return send_from_directory(path, filename)

3、结果说明

  • 图片已上传至uploads目录

  • http返回 upload_failed 并且 url路径是/admin/uploads/army.jpg

4、想要的结果

  • 图片上传成功，并且能正确返回URL，用于图文的编辑

5、看了flask_ckeditor的部分函数，是在这个装饰器里边返回的，关于这个函数的功能还在看，目前没有结论。

            return Markup('''<script type="text/javascript">
        window.parent.CKEDITOR.tools.callFunction(%s, "%s", "%s");</script>''' % (func_num, url, message))
2

补充图片。

flask_ckeditor
flask_ckeditor1863×840 53.7 KB

3

结帖，已经找到问题了，稍后将最终代码发一下，供参考。

4

之前犯的一些错误
1、ckeditor 4.5 用包装器， @ckeditor.uploader，指的是ckeditor编辑器本身的版本，我当成了flask_ckeditor的。
2、最后返回用upload_success，response返回的是json数据，

def upload_success(url, filename):
    return jsonify(uploaded=1, url=url, filename=filename)

http response返回
{
  "filename": "army.jpg", 
  "uploaded": 1, 
  "url": "/admin/uploads/army.jpg"
}

3、ckeditor.js会请求http://127.0.0.1:5000/admin/uploads/army.jpg 两次，此时调用uploaded，

@expose('/uploads/<filename>')
    def uploaded(self, filename):
        if not login.current_user.is_authenticated:
            return redirect(url_for('admin.login'))

        path = current_app.config['UPLOAD_DIR']
        print(path)
        return send_from_directory(path, filename)

4、ckeditor取得图片，返回成功。

2 个赞