萤途个人博客

[[ slide_text ]]

[[ item.c ]]

博客上传文章配置

发布时间: 2026-01-22 作者: wshsm 来源: yt

Django

# 博客上传文章配置

本地图片目录，图片上传方法

问题的核心在于：Markdown 里的图片链接是“本地相对路径”，而网页需要的是“服务器 URL 路径”。一般用户的上传文件都放在 `/media/` 路径下，目录一般的结构:

```Plaintext
my_blog_project/
 ├── ...
 ├── static/  静态文件 (CSS, JS, 网站Logo)
 └── media/   (所有用户文件)
      ├── .../...          <-- 其他用户文件
      └── uploads/         <-- 上传的
           ├── /articles_image      <-- 文章的图片
           │    ├── 202601/         <-- 按年月分文件夹（推荐，防止一个文件夹几千张图卡死）
           │    │    ├── drone-schematic.jpg
           │    │    └── pixhawk-wiring.png
           │    └── 202602/
           └── ...
```

## 一、setting.py 配置

首先django项目自身需要配置，这个一般是一个工程的前提

在settings.py中，提前配置路径，这是一个项目的基本前提，不仅仅是图片上传需要这个配置，包括头像、封面等都需要配置，否则将会找不到

```python
# 用户自己上传文件的话需要自己配置，添加以下两行
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
```

## 二、手动管理图片

将图片复制到 `media/uploads_img/` 下面的目录下然后给 `.md` 文章中图片的目录前面加上图片的url路径，比如;

原来的内容：

```html
<img src="position_mc.DC-hD8a2.png" width="600" alt="position">
```

修改后的内容 (文件路径为media下的实际路径):

```html
<img src="/media/uploads/articles_image/202601/position_mc.DC-hD8a2.png" width="600" alt="position">
```

### img的html格式报错问题

这里用标准的markdown格式可以渲染图片，但是 html 格式的图片就无法进行。由于标准的markdown无法用宽度调节的代码，并且为了更好的适配不同的格式，因此还是需要兼容img标签，这里editor.md本身是支持html语法的

注：虽然此功能能极大地扩展 Markdown 语法，但也面临着安全上的风险，所以默认是不开启的。

这是由于 editor.md 默认不启用 HTML 语法, 因此需要配置editor.md的js代码引用部分

下面是官网的说明

{
        htmlDecode : true // Decode all html tags & attributes
        // Filter tags/attributes expression : tagName,tagName,...|attrName,attrName,...
        htmlDecode : "style,script,iframe,sub,sup|on*"  // Filter tags, and all on* attributes
        //htmlDecode : "style,script,iframe,sub,sup|*"    // Filter tags, and all attributes
        //htmlDecode : "style,script,iframe,sub,sup,embed|onclick,title,onmouseover,onmouseout,style" // Filter tags, and your custom attributes
    }

因此只需要在原本的JS代码中配置 `htmlDecode : "style,script,iframe,sub,sup|on*"` 即可

## 三、图片自动上传配置

核心部分，通过editor.md的接口进行配置

### 1.前端配置

```javascript
var editor = editormd("test-editormd", {
    width  : "100%",
    height : 720,
    path   : "/static/editor.md-master/lib/",
    
    // --- 核心配置开始 ---
    // 1. 开启图片上传功能
    imageUpload    : true,    // 默认为关闭
    imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"], // 允许的格式
    
    // 2. 指向 Django 的上传接口，然后再django的urls.py里面配置
    imageUploadURL : "/api/upload_image/", 
    // --- 核心配置结束 ---
    
    // ... 其他配置 ...
});
```

然后图片中就会有这个"本地上传"的按钮，点击可以发现后台会报错误，这是因为还没有配置后端的代码

### 2.后端配置

前提：django下有api这个app，并且所有以api开头的请求都分发到api下面

editor.md 官方图片上传示例

#### 2.1 创建视图函数

在api这个app下目录下，创建文件 `/api/views/uploads.py`

```python
import os
import uuid
import datetime
from django.conf import settings
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.clickjacking import xframe_options_exempt

@csrf_exempt
@xframe_options_exempt
def upload_image(request):
    if request.method == 'POST':
        res={
             'success': 0, # 0表示失败，1表示成功
             'message': "上传失败",
             'url': ""
        }
        # 获取上传的文件 (注意这个 key 是 editor.md 固定的)
        img_file = request.FILES.get('editormd-image-file')
        if not img_file:
            res['message'] = "未获取到图片"
            return JsonResponse(res)
        
        # root: 文件名, ext: 文件后缀
        root, ext = os.path.splitext(img_file.name)
        # 安全清洗: 把文件名里的空格替换成下划线，防止 Linux 路径报错
        safe_root = root.replace(' ', '_')
        now = datetime.datetime.now()
        image_name = f"{now.strftime('%Y%m%d_%H%M%S')}_{safe_root}{ext}"

relative_path = os.path.join('uploads', 'articles_image', now.strftime('%Y%m'))
        abs_image_path = os.path.join(settings.MEDIA_ROOT, relative_path)

if not os.path.exists(abs_image_path):
            os.makedirs(abs_image_path)

file_path = os.path.join(abs_image_path, image_name)
        with open(file_path, 'wb+') as f:
            for chunk in img_file.chunks():
                f.write(chunk)

url_path = os.path.join(settings.MEDIA_URL, relative_path, image_name)
        # 强制替换反斜杠为正斜杠 (兼容 Windows 开发环境)
        url_path = url_path.replace('\\', '/')

# 测试
        # print(img_file, root, ext, safe_root, image_name)
        # print('上传文件名字:' + root + ext)
        # print('文件保存名称:' + image_name)
        # print('相对路径:' + relative_path)
        # print('绝对路径:' + abs_image_path)
        # print('返回路径:' + url_path)

res['success'] = 1
        res['message'] = "上传成功"
        res['url'] = url_path
        return JsonResponse(res)
```

代码中用到的工具

- os.path.splitext(...): 这是一个 Python 工具，专门把文件名切成两半：(文件名, 后缀)。
- os.path.join(absolute_path, image_name)
  - os.path.join(...): 路径拼接
  - 把‘文件夹路径’和‘文件名’拼在一起
- 'wb+':

##### Django 安全机制拦截允许

由于 editor.md 是一个第三方的 JavaScript 库，它内部写死了一套上传图片的逻辑，根据后面返回到前端的报错提示, 大概率是用的比较古老的hidden iframe表单提交，并且他默认也不知道项目是Django项目，因此不会带Token，就需要 Django 不再验证请求的来源是否绝对合法，直接放行，因此使用装饰器 `@csrf_exempt` 来免去验证请求。

但是这里发现仅仅免去验证请求还不够，在前端当后端返回一个URL时前端也报错

editor.md 的图片上传机制是创建一个看不见的 `<iframe>` 来提交图片的, Django 发现这个请求要在 iframe 里显示，直接拒绝了 (deny)。然后 Editor.md 的 JS 代码试图去读取 iframe 里的上传结果（JSON），结果发现 iframe 被浏览器封锁了，于是报错说“无法跨域访问”。 因此这里还需要再创建一个装饰器 `@xframe_options_exempt`

因此需要引入下面两个装饰器

```python
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.clickjacking import xframe_options_exempt
```

#### 2.2 配置路由(urls.py)

前提在 setting.py 目录下的 urls.py 中以及将所有以/api开头的分发到api/urls.py中，再由他进行分发

在setting.py 目录下 `urls.py` 中

```python
from django.urls import include, re_path

urlpatterns = [
    # ... 其他路由 ...
    re_path(r'^api/', include('api.urls')),  # 将所有api开头的api，都分发到api的urls.py中
]
```

在 `api/urls.py` 中

```python
from django.urls import path
from api.views import uploads

urlpatterns = [
    # ... 其他路由 ...
    path('upload_image/', uploads.upload_editor_image, name='upload_editor_image'),
]
```

你觉得文章怎么样