Django如何在file-upload字段中预选中已上传的图片？

我的表单示例截图

开发带图片上传功能的帖子发布页时，需要在编辑帖子页面让文件上传字段默认关联之前已上传的照片，直接给<input type="file">设置value为历史文件地址的写法不生效，现有代码如下：

现有代码 #

HTML模板 #

<div class="qq-uploader-buttonText-value">
    <input type="file" id="input_22" name="photo1" class="form-control-file" data-imagevalidate="yes" data-file-accept="pdf, doc, docx, xls, xlsx, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" data-file-maxsize="10854" data-file-minsize="0" data-file-limit="" value="{{Post.photo1.url}}" data-component="fileupload" />
</div>

views.py #

import random
from django.shortcuts import redirect, render
from django.http import HttpResponse

from home.models import Posts

@login_required(login_url='login')
def update(request, posts_id):
     Post = Posts.objects.get(postid=posts_id)
     context = {'Post':Post,'cod':usrid}

     return render(request, 'update.html', context)

urls.py #

from django.contrib.auth import logout
from django.urls import path
from . import views
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('update/<str:posts_id>/',views.update,name="update"),
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)

浏览器出于安全规则限制，原生<input type="file">元素不支持通过value属性预设选中的文件，没有任何前端方法可以直接让文件选择框默认选中服务器上存储的历史文件，正确实现逻辑是单独做历史文件回显，后端兼容未上传新文件时保留原文件的逻辑：

• 模板层调整
  移除file输入框上无效的value属性，在上传组件旁单独新增历史图片预览区域，当帖子存在已上传配图时展示预览，同时提示用户不选新文件则保留原图。
  调整后HTML代码参考：

  <div class="qq-uploader-buttonText-value">
      <!-- 原文件上传框，移除无效的value绑定 -->
      <input type="file" id="input_22" name="photo1" class="form-control-file" data-imagevalidate="yes" data-file-accept="pdf, doc, docx, xls, xlsx, csv, txt, rtf, html, zip, mp3, wma, mpg, flv, avi, jpg, jpeg, png, gif" data-file-maxsize="10854" data-file-minsize="0" data-file-limit="" data-component="fileupload" />
      
      <!-- 已上传文件回显区 -->
      {% if Post.photo1 %}
      <div class="existing-file-preview mt-2">
          <p>当前已上传配图：</p>
          <img src="{{ Post.photo1.url }}" alt="已上传帖子图片" style="max-width: 200px; max-height: 200px; border: 1px solid #eee;">
          <p class="text-muted small">* 无需替换图片则不用选择新文件</p>
      </div>
      {% endif %}
  </div>
  

  如果你用的是代码里标记的qq系列第三方上传组件，可以查看对应组件的初始文件加载API，把历史文件的地址、名称等参数传入组件实现组件内置的回显效果，本质依然不是给原生input设值。

• 后端视图层调整
  处理POST更新请求时，判断用户是否上传了新的图片文件，只有拿到新上传的文件时才覆盖数据库里的原图片字段，没有新文件时保留原有值，避免空值覆盖历史数据。
  调整后views.py代码参考：

  import random
  from django.shortcuts import redirect, render, get_object_or_404
  from django.http import HttpResponse
  from django.contrib.auth.decorators import login_required
  
  from home.models import Posts
  
  @login_required(login_url='login')
  def update(request, posts_id):
      # 用get_object_or_404避免帖子不存在时抛出500错误
      Post = get_object_or_404(Posts, postid=posts_id)
      if request.method == "POST":
          # 此处替换为你实际需要更新的其他普通字段
          Post.title = request.POST.get('title')
          Post.content = request.POST.get('content')
          
          # 校验是否上传了新的配图
          new_photo = request.FILES.get('photo1')
          if new_photo:
              Post.photo1 = new_photo
          Post.save()
          return redirect('update', posts_id=Post.postid)
      
      context = {'Post':Post,'cod':usrid}
      return render(request, 'update.html', context)
  

内容的提问来源于stack exchange，提问作者Shahid Fahad