Django上传图片到数据库且文件选择按钮不显示图片路径的方法

你遇到的路径展示问题是Django默认FileInput部件的默认渲染逻辑导致的：当字段存在已上传的图片值时，部件会自动在输入框旁拼接当前文件的路径/链接文本，调整可以用以下两种方案：

方案1：自定义无路径展示的FileInput部件（推荐） #

直接重写部件的渲染逻辑，移除路径展示部分，同时兼容编辑场景不会丢失原有上传值：

from django import forms
from .models import Product

class NoPathFileInput(forms.FileInput):
    def render(self, name, value, attrs=None, renderer=None):
        # 渲染纯文件选择框，不传当前值就不会生成路径展示
        file_input = super().render(name, None, attrs=attrs, renderer=renderer)
        if value:
            # 编辑场景新增隐藏域保存原有值，避免用户未上传新图时丢失旧图
            hidden_input = f'<input type="hidden" name="{name}" value="{value}">'
            return f"{hidden_input}{file_input}"
        return file_input

class ProductForms(forms.ModelForm):
    images1 = forms.ImageField(widget=NoPathFileInput)
    class Meta:
        model = Product
        fields = '__all__'

方案2：模板层手动渲染输入框 #

如果你不想修改表单定义，也可以在前端模板中跳过默认的字段渲染，手动写文件输入框代码：

<!-- 替换原来的 {{ form.images1 }} 写法 -->
<input type="file" name="images1" id="id_images1" accept="image/*">
<!-- 如果是编辑表单，额外加隐藏域保存原有值 -->
{% if form.instance.images1 %}
<input type="hidden" name="images1" value="{{ form.instance.images1 }}">
{% endif %}

两种方案都不会在前端页面输出任何图片路径信息，仅保留纯文件选择按钮。

内容的提问来源于stack exchange，提问作者jithin raj mm