Django MEDIA_URL返回当前页面而非图片，求正确配置与服务方案

我完全懂这种明明需求简单但就是跑不起来的挫败感！别着急，咱们一步步把Django上传并展示图片的配置捋清楚，保证你的项目能正常跑起来。

这是媒体文件能正常存储和访问的基础，在settings.py末尾加上以下配置：

# 媒体文件存储的本地路径（项目根目录下的media文件夹）
MEDIA_ROOT = BASE_DIR / 'media'
# 访问媒体文件的URL前缀
MEDIA_URL = '/media/'

另外确认INSTALLED_APPS里已经包含'django.contrib.staticfiles'（默认项目都会有，保险起见检查一下）。

你用FileField也能存图片，但ImageField会自动验证上传文件是否为图片，更适合这个场景。不过用它需要先安装依赖：

pip install pillow

然后修改模型：

from django.db import models

class UploadImageModel(models.Model):
    # upload_to指定子文件夹，图片会存在media/uploads目录下，更整洁
    image = models.ImageField(upload_to='uploads/')
    title = models.CharField(max_length=100, null=True, blank=True)

    def __str__(self):
        return self.title or "Untitled Image"

要让开发环境能访问到媒体文件，还要添加上传和展示页面的路由：

from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.conf.urls.static import static
# 后面要写这两个视图，先提前导入
from .views import upload_image, image_list

urlpatterns = [
    url('admin/', admin.site.urls),
    # 上传页面的路由
    url(r'^upload/$', upload_image, name='upload_image'),
    # 图片列表展示页面的路由
    url(r'^images/$', image_list, name='image_list'),
]

# 开发环境下添加媒体文件的访问映射（生产环境请用Nginx/Apache处理）
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

需要两个视图：一个处理上传逻辑，一个展示所有已上传的图片：

from django.shortcuts import render, redirect
from .models import UploadImageModel
from .forms import UploadImageForm

def upload_image(request):
    if request.method == 'POST':
        # 必须同时传入request.POST和request.FILES
        form = UploadImageForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            # 上传成功后跳转到图片列表页
            return redirect('image_list')
    else:
        form = UploadImageForm()
    return render(request, 'upload.html', {'form': form})

def image_list(request):
    # 获取所有已上传的图片
    images = UploadImageModel.objects.all()
    return render(request, 'image_list.html', {'images': images})

用ModelForm可以快速生成和模型绑定的表单：

from django import forms
from .models import UploadImageModel

class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UploadImageModel
        fields = ['image', 'title']

在项目根目录创建templates文件夹，然后新建两个模板：

upload.html（上传页面） #

<!DOCTYPE html>
<html>
<head>
    <title>Upload Image</title>
</head>
<body>
    <h1>Upload Your Image</h1>
    <!-- 必须加enctype="multipart/form-data"才能上传文件！ -->
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Upload</button>
    </form>
</body>
</html>

⚠️ 重点提醒：enctype="multipart/form-data"是上传文件的必备属性，少了它文件根本传不上去！

image_list.html（图片展示页面） #

<!DOCTYPE html>
<html>
<head>
    <title>Uploaded Images</title>
</head>
<body>
    <h1>Uploaded Images</h1>
    <div>
        {% for img in images %}
            <div style="margin: 20px;">
                <h3>{{ img.title }}</h3>
                <!-- 用image.url获取图片的访问链接 -->
                <img src="{{ img.image.url }}" alt="{{ img.title }}" style="max-width: 300px;">
            </div>
        {% empty %}
            <p>No images uploaded yet.</p>
        {% endfor %}
    </div>
    <p><a href="{% url 'upload_image' %}">Upload another image</a></p>
</body>
</html>

运行以下命令完成初始化：

# 生成模型迁移文件
python manage.py makemigrations
# 执行迁移
python manage.py migrate
# 启动开发服务器
python manage.py runserver

现在访问http://127.0.0.1:8000/upload/上传图片，再访问http://127.0.0.1:8000/images/就能看到你上传的图片啦！

• 忘记加表单的enctype="multipart/form-data"：这是上传文件的核心配置，很多人在这里踩坑。
• 没安装Pillow：使用ImageField必须依赖这个库，否则会报错。
• 开发环境没配置媒体文件路由：导致图片URL返回404。
• MEDIA_ROOT路径错误：确认BASE_DIR是项目根目录（settings.py默认有BASE_DIR = Path(__file__).resolve().parent.parent）。

内容的提问来源于stack exchange，提问作者Adarsh Maurya