Django前端上传图片成功但仅显示破损图标该如何解决？

• 前置检查：确认已安装Pillow依赖，执行pip install pillow即可安装，Django的ImageField需要该依赖支持。

1. 修复HTML表单配置 #

上传文件的表单必须指定编码类型，否则后端无法接收到文件数据，修改form标签如下：

<form method="POST" action="" enctype="multipart/form-data">

其余表单内的代码保持不变即可。

2. 修复views.py逻辑 #

原代码从错误的位置获取上传文件，且POST请求响应时未携带图片数据，修改后的完整代码：

from django.shortcuts import render
from .models import Upload

def Home(request):
    if request.method == 'POST':
        # 上传的文件存放在request.FILES中，不是request.POST
        photo = request.FILES['doc']
        Upload.objects.create(document = photo)
    # 无论请求类型是GET还是POST，都返回所有图片数据到模板
    photo = Upload.objects.all()
    context = {
        'phone': photo
    }
    return render(request, 'Home.drive.html', context)

3. 配置媒体资源访问路由 #

Django默认不会自动处理用户上传的媒体文件，需要手动添加配置：

3.1 项目settings.py配置 #

在项目根目录的settings.py文件末尾添加如下配置：

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

该配置指定了用户上传文件的存储路径和访问url前缀。

3.2 项目主urls.py配置 #

在项目根目录的urls.py文件中添加媒体资源的访问路由，修改后示例：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 此处保留你原有的所有路由配置，无需修改
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

完成以上修改后重启Django服务，重新上传图片即可正常在前端展示。

内容的提问来源于stack exchange，提问作者AMRIT SHAHI