Django中ModelForm的ImageField无法上传图片至服务器求助

作为Django新手开发图库应用时遇到以下问题：普通表单可正常上传图片，但使用ModelForm时无法将图片上传至服务器，项目的media根目录始终为空，但数据库中Photo模型的photo字段已有非空URL。后续通过修改ImageField的widget解决了问题，但不清楚具体原因。以下是相关代码、配置及问题分析：

相关代码与配置 #

models.py代码 #

from django.db import models
from django.urls import reverse
from django.core.validators import validate_image_file_extension
from django.core.files.storage import FileSystemStorage


fs = FileSystemStorage(location='/media')
class FavoriteImages(models.Manager):
    def get_queryset(self):
        return super().get_queryset().filter(favorite=True)


# Create your models here.
class Photo(models.Model):
    name = models.CharField(max_length=120, null=True)
    photo = models.ImageField(storage=fs, upload_to='media/', validators=[validate_image_file_extension])
    date_uploaded = models.DateTimeField(auto_now=True)
    favorite = models.BooleanField(default=False, blank=False)
    slug = models.SlugField(null=True, blank=True)

    gallery = models.Manager()
    gallery_favorites = FavoriteImages()

    class Meta:
        ordering = ['-date_uploaded']

views.py代码 #

from PIL import Image
def image_new(request, *args, **kwargs):
    Image.init()
    form = PhotoForm(data=request.POST, files=request.FILES)
    if request.method == 'POST':
        form = PhotoForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            redirect('../all')
    context = {
        'form': form
    }
    return render(request, "form.html", context)

forms.py代码 #

class PhotoForm(forms.ModelForm):
    name = forms.CharField(label='',widget=forms.TextInput(attrs={'class':'form-control', 'placeholder':'Title'}))
    photo = forms.ImageField(widget=forms.FileInput(attrs={'class':'form-control'}))
    favorite = forms.BooleanField(label='Mark as Favorite',widget=forms.CheckboxInput(attrs={'class':'form-check-input'}))

    class Meta:
        model = Photo
        fields = ['name',
                  'photo',
                  'favorite']

模板文件代码 #

{% extends "base.html" %}

{% block content %}
    {% if form.is_multipart %}
    <form enctype="multipart/form-data" method="post">
        This form is a multipart.
    {% else %}
    <form method="post">
    {% endif %}
        {% csrf_token %}
    {% if form.media %}
    {{ form.media }}
    {% endif %}
    {{ form.as_p }}

    <input type="submit" class="btn btn-primary" value="Save"/>
    </form>

{% endblock %}

settings配置 #

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

问题原因与修正方案 #

1. 视图函数初始化逻辑错误 #

原视图在GET请求（首次加载页面）时就用request.POST和request.FILES绑定表单，这两个对象在GET请求下为空，会导致表单处于异常状态。同时redirect未加return，表单验证通过后不会执行跳转。

修正后的views.py：

from django.shortcuts import redirect, render
from .forms import PhotoForm

def image_new(request, *args, **kwargs):
    if request.method == 'POST':
        form = PhotoForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('../all')  # 添加return执行跳转
    else:
        form = PhotoForm()  # GET请求初始化空表单
    context = {'form': form}
    return render(request, "form.html", context)

注：Image.init()无需手动调用，Django会自动处理PIL初始化。

2. 自定义FileSystemStorage路径冲突 #

手动创建的fs = FileSystemStorage(location='/media')指定了系统根目录下的/media，与settings中MEDIA_ROOT指向的项目目录media不一致，导致文件被存到了系统根目录的/media中，而非项目的media目录，所以你看到项目的media目录为空，但数据库中有URL。

修正方案二选一：

• 去掉自定义storage，使用Django默认存储：

  # models.py中修改Photo字段
  photo = models.ImageField(upload_to='photos/', validators=[validate_image_file_extension])
  

• 让自定义storage的location与MEDIA_ROOT一致：

  # models.py中导入settings并修改fs
  from django.conf import settings
  
  fs = FileSystemStorage(location=settings.MEDIA_ROOT)
  

3. 关于修改widget解决问题的原因 #

原forms.py中widget的设置本身无错误，你修改widget后解决问题，大概率是修改过程中间接修正了其他配置（比如视图或模型的存储路径），或是原widget的attrs存在隐性冲突（比如前端样式干扰了文件输入的正常提交）。但核心问题还是视图初始化逻辑和storage路径的配置错误。

内容的提问来源于stack exchange，提问作者Benayu P