如何在Django模型表单中使用图片作为选项并存储至数据库

问题根源 #

你当前的Personal_readme模型中，system字段使用硬编码的choices列表，未关联存储图片信息的SystemChoice模型，导致表单无法获取图片链接展示图片；同时模板错误地将表单字段直接作为图片src，这也是显示URL的直接原因。

解决方案步骤 #

1. 修改模型关联

将Personal_readme中的system字段改为ManyToManyField，关联到SystemChoice模型，直接复用存储的图片信息：

class Personal_readme(models.Model):
    work_status_Regex = RegexValidator(regex = "((http|https)://)(www.)?[a-zA-Z0-9@:%._\+~#?&//=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%._\+~#?&//=]*)")
    name = models.CharField(max_length=70, blank=False)
    about_me = models.CharField(max_length=100, blank=True)
    work_status =  models.CharField(max_length=70, blank=True)
    work_status_link = models.URLField(validators = [work_status_Regex], blank=True)
    # 替换硬编码choices为ManyToMany关联SystemChoice
    system = models.ManyToManyField(SystemChoice, blank=True)

    def __str__(self):
        return self.name

删除原有的system_choice硬编码列表

2. 调整表单配置

修正Personal_Readme_form中的标签错误，移除模型中不存在的字段配置：

class Personal_Readme_form(forms.ModelForm):
    class Meta:
        model = Personal_readme
        fields = '__all__'
        labels = {
            'name':'Your Name',
            'about_me':'About Yourself',
            'work_status':'Your Current work status',
            'work_status_link':'Your Work Status Link',
            'system':'I prefer working on',
        }
        widgets = {
            'name': forms.TextInput(attrs={'placeholder': 'Type your name'}),
            'about_me': forms.Textarea(attrs={'placeholder': 'A short summary about yourself'}),
            'work_status' : forms.TextInput(attrs={'placeholder': 'Your current status'}),
            # system字段的渲染将在模板中手动实现，无需指定widget
        }

3. 自定义模板渲染图片选项

在模板中手动循环system字段的选项，显示每个系统的图片和复选框：

<form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.name|as_crispy_field }}
    {{ form.about_me|as_crispy_field }} 
    {{ form.work_status|as_crispy_field }}
    {{ form.work_status_link|as_crispy_field }}

    <div class="system-options">
        <label>{{ form.system.label }}</label>
        {% for choice in form.system %}
            <div class="system-choice">
                {{ choice.tag }} <!-- 生成复选框输入控件 -->
                <img src="{{ choice.choice_label.img_link }}" alt="{{ choice.choice_label.name }}" />
                <span>{{ choice.choice_label.name }}</span>
            </div>
        {% endfor %}
    </div>

    <input type="submit" value="Generate File">
</form>

choice.choice_label对应SystemChoice的实例，可直接调用img_link和name字段

4. 可选：添加样式优化显示

添加CSS让选项布局更美观：

.system-options {
    display: flex;
    gap: 20px;
    margin-top: 15px;
}
.system-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.system-choice img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 5px;
}
.system-choice input[type="checkbox"] {
    margin-bottom: 8px;
}

原理说明 #

通过ManyToManyField关联SystemChoice模型，表单会自动加载所有系统选项的实例数据，模板中可直接调用每个选项的图片链接，实现图片形式的选择按钮；选中的选项会自动保存到数据库的关联表中，完成数据存储需求。

内容的提问来源于stack exchange，提问作者Shreyash mishra