Django实现图片上传与展示功能完整指南
发布时间：2026-10-13 |
4人浏览过
本文详细解析在Django框架中实现图片上传与展示功能的完整流程。内容涵盖HTML表单中enctype属性的必要性、CSRF Token的安全验证机制，以及后端处理大文件与小文件的逻辑判断。通过具体代码示例，演示如何保存上传文件至本地static目录并更新数据库，最终实现图片列表的展示与重定向，帮助开发者快速掌握Django文件处理核心技能。
HTML表单配置与CSRF安全验证
首先，在HTML页面的form表单中需配置三个关键属性：action指定数据提交的URL地址，method定义提交方式（如GET或POST），而enctype属性在涉及图片上传时必须设置为multipart/form-data，以确保文件数据能正确编码传输。
Django框架内置了csrf_token机制以防范跨站请求伪造攻击，因此在前端页面中必须生成并包含csrf_token字符串，用于验证请求来源的真实性，确保只有合法用户才能提交数据。
<form action="/pic_upload/" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="file">
<input type="submit" value="提交">
</form>接下来，需要定义处理图片上传的后端接口，该接口负责接收前端提交的文件数据并进行后续处理。
Django后端图片上传处理逻辑
def pic_upload(request):
if request.method == "GET":
return render(request,"helloapp/pic_upload.html",locals())
if request.method == "POST":
error = ""
fp = request.FILES.get("file")
# fp 获取到的上传文件对象
if fp:
path = os.path.join(STATICFILES_DIRS[0],'image/' + fp.name) # 上传文件本地保存路径， image是static文件夹下专门存放图片的文件夹
# fp.name #文件名
#yield = fp.chunks() # 流式获取文件内容
# fp.read() # 直接读取文件内容
if fp.multiple_chunks(): # 判断上传文件大于2.5MB的大文件
# 为真
file_yield = fp.chunks() # 迭代写入文件
with open(path,'wb') as f:
for buf in file_yield: # for情况执行无误才执行 else
f.write(buf)
else:
print("大文件上传完毕")
else:
with open(path,'wb') as f:
f.write(fp.read())
print("小文件上传完毕")
models.ImgPath.objects.create(path=('image/' + fp.name)) # image是static文件夹下专门存放图片的文件夹
else:
error = "文件上传为空"
return render(request,"helloapp/pic_upload.html",locals())
return redirect("helloapp/pic_index/") # 重定向到首页随后，构建一个用于展示已上传图片的页面，并在对应的接口中对前端传递的参数进行有效性判断，确保只有合法且存在的图片数据才能被渲染展示。
{% for img in imgs %}
<img src="{% static img.path %}">
{% empty %}
<h1>您没有上传任何图片</h1>
{% endfor %}实现图片展示的具体接口逻辑，该接口从数据库中获取所有已保存的图片路径信息，并将其传递给前端模板进行渲染。
图片展示接口与页面渲染
def pic_index(request):
imgs = models.ImgPath.objects.all()
return render(request,'helloapp/pic_index.html',locals())完成上述步骤后，Django中从图片上传到前端展示的完整功能链路即告构建完毕。
以上即为本文的全部内容，希望能为读者的学习提供有益帮助，也欢迎大家继续支持本站获取更多技术资源。
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
