Django 集成DjangoUeditor 在图片文件路径错误问题

﹏ヽ暗。殇╰゛Y 2023-07-24 13:18 8阅读 0赞

废话不多说

使用DjangoUeditor 富文本编辑器时，上传图片不显示问题

1、首先集成DjangoUeditor，我相信我大家应该都会集成。

2、在集成好以后，使用过程中发现，上传图片不显示。类似这样：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70][]

分析一下原因， 看到后台日志发现：

![20200411232013247.png][]

发现是我们在上传后，文件传到了路径中，但是不会正常显示。

这里，我直接说下，需要配置的地方：

1、settings.py 中，需要设置两个地方：

MEDIA_URL = '/media/'
    MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
    MEDIA_DIRS = (
        os.path.join(BASE_DIR, 'media')
    )

如下图：

![20200411232408877.png][]

下面这个，只需要找到TEMPLATES  加上最下面红框中的那句话即可。

TEMPLATES = [
        {
            'BACKEND': 'django.template.backends.django.DjangoTemplates',
            'DIRS': [os.path.join(BASE_DIR, 'templates')]
            ,
            'APP_DIRS': True,
            'OPTIONS': {
                'context_processors': [
                    'django.template.context_processors.debug',
                    'django.template.context_processors.request',
                    'django.contrib.auth.context_processors.auth',
                    'django.contrib.messages.context_processors.messages',
    
                    # 下面为添加
                    'django.template.context_processors.media',  # 将media_url上传文件路径注册到模板中
                ],
            },
        },
    ]

如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 1][]

2、配置urls.py

先要导入需要的包文件：

from django.views.static import serve  # 上传文件处理函数
    from .settings import MEDIA_ROOT  # 从配置中导入MEDIA_ROOT

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 2][]

url(r'^media/(?P<path>.*)$', serve, {"document_root": MEDIA_ROOT})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 3][]

3、字段设置：models.py

case_details = UEditorField(width=1200, height=800, toolbars="full",
                                    imagePath="images/",
                                    filePath="files/",
                                    upload_settings={"imageMaxSize": 1204000},
                                    settings={},
                                    verbose_name="案列详情",
                                    null=True,
                                    blank=True)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 4][]

设置完成：

在打开DjangoUeditor 查看一下显示ok：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 5][]

搞定收工

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70]: /images/20230528/874bf6c4efa141d3a96846cfc4b60192.png
[20200411232013247.png]: /images/20230528/4474130451ca478f9ad68f477669d337.png
[20200411232408877.png]: /images/20230528/0019d8aca6c340b7b83a70f4b36da369.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 1]: /images/20230528/1e2490162c8b40bcbb9cfd0f516af0f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 2]: /images/20230528/b8408fa6ae2e470cab5116378d3fd67b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 3]: /images/20230528/66c97d302152450eb3170745839c5bbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 4]: /images/20230528/ec28e3375d594e6fb5b222caaf3b3251.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3OTg2ODM_size_16_color_FFFFFF_t_70 5]: /images/20230528/b622b0af53dd4db1881df05930ff662b.png