Flask中使用Editormd上传图片

1. 前端与后端数据传输的方式

前端用户在写文章时，有时候会需要往文章中插入图片，editormd开源项目也提供了“添加图片”的功能，当用户点击添加图片按钮后，会弹出一个窗口，图片的来源支持两种：一种是本地图片，另一种是网络图片；添加后的图片，我们还可以给它添加链接，业务对图片进行描述。

• 网络图片

随便从网上找一个图片，复制图片地址，黏贴至“图片地址”栏里，完善图片的其他两个信息。

点击确定后，editormd编辑器里就会多出一行图片的信息，右边预览里就会显示一张图片，并且点击图片会跳转到百度。

• 本地图片

本地图片的上传相对网络图片来说要复杂的多，需要后端服务器处理用户上传过来的图片，并保存到服务器指定文件夹中。本地图片上传的服务器后端地址，需要在前端edit-post.html模板中指定。

* 前端代码：

//初始化编辑器
var testEditor;
$(function () {
    testEditor = editormd("editormd", {
         "100%",
        height: 740,
        path: '/static/editormd/lib/',
        theme: "",
        previewTheme: "",
        editorTheme: "pastel-on-dark",
        markdown: "",
        codeFold: true,
        saveHTMLToTextarea: true, // 保存 HTML 到 Textarea
        searchReplace: true,
        htmlDecode: "style,script,iframe|on*", // 开启 HTML 标签解析，为了安全性，默认不开启    
        emoji: true,
        taskList: true,
        tocm: true, // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,    
        //配置本地图片上传参数
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "{{ url_for('main.upload') }}", //指定图片要上传到哪个视图函数
        onload: function () {
            //图片上传成功后，可以做点什么。
        }
    });
});
//获取编辑器内容
var blogcontent = encodeURIComponent(testEditor.getMarkdown());

* 后端代码：

后端收到前端发过来的请求中包括一个变量为“editormd-image-file”的图片数据，后端处理函数upload()会将上传的文件获取，并解析保存到指定的后台文件夹中。处理结果有两种：1.失败：返回带两个参数的json数据，2.成功：返回三个参数的json数据，其中包括图片的url地址。图片获取处理函数image(name)中，我们对前端隐藏了实际的图片物理路径，而是通过处理函数来提供接口访问。

后台返回给前端用户的json数据

# -*- coding:utf-8 -*-
from flask import url_for, request, Response
from . import main
from flask_login import current_user, login_required
import os

@main.route('/upload', methods=['POST'])
@login_required
def upload():
    file = request.files.get('editormd-image-file')
    if not file:
        result = {
            'success':0,
            'message':'上传失败'
        }
    else:
        ext = os.path.splitext(file.filename)[1]
        filename = datetime.now().strftime('%Y%m%d%H%M%S') + ext
        # 服务器后台处理文件夹和文件时，不能使用url_for()方法，需要服务器上的实际物理路径
        current_path = os.path.abspath(os.path.dirname(__file__))
        father_path = os.path.abspath(os.path.dirname(current_path) + os.path.sep)
        # windows上的路径时‘’的
        filedir = os.path.join(father_path, 'static\asset\img\')
        # 将图片保存到当前用户所在的目录下
        filepath = os.path.join(filedir, current_user.username)
        if not os.path.exists(filepath): # 文件夹不存在，则创建
            os.mkdir(filepath)
        file.save(os.path.join(filepath, filename))
        result = {
            'success':1,
            'message':'上传成功!',
            'url':url_for('main.image', name=filename)
        }
    return result
# 隐藏后端静态文件目录的效果
@main.route('/image/<name>', methods=['GET'])
def image(name):
    current_path = os.path.abspath(os.path.dirname(__file__))
    father_path = os.path.abspath(os.path.dirname(current_path) + os.path.sep)
    filedir = os.path.join(father_path, 'static\asset\img\')
    filepath = os.path.join(filedir, current_user.username)
    with open(os.path.join(filepath, name), 'rb') as f:
        resp=Response(f.read(), mimetype="image/jpeg")
    return resp

2. 最后的测试

本地图片的上传，在上面代码下，能很好地进行处理，效果如下：

3. 总结

• keep going.