Flask中使用Editormd上傳圖片

1. 前端與后端數據傳輸的方式

前端用戶在寫文章時，有時候會需要往文章中插入圖片，editormd開源項目也提供了“添加圖片”的功能，當用戶點擊添加圖片按鈕后，會彈出一個窗口，圖片的來源支持兩種：一種是本地圖片，另一種是網絡圖片；添加后的圖片，我們還可以給它添加鏈接，業務對圖片進行描述。

• 網絡圖片

隨便從網上找一個圖片，復制圖片地址，黏貼至“圖片地址”欄里，完善圖片的其他兩個信息。

點擊確定后，editormd編輯器里就會多出一行圖片的信息，右邊預覽里就會顯示一張圖片，並且點擊圖片會跳轉到百度。

• 本地圖片

本地圖片的上傳相對網絡圖片來說要復雜的多，需要后端服務器處理用戶上傳過來的圖片，並保存到服務器指定文件夾中。本地圖片上傳的服務器后端地址，需要在前端edit-post.html模板中指定。

* 前端代碼：

//初始化編輯器
var testEditor;
$(function () {
    testEditor = editormd("editormd", {
        width: "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.