Django实现文件上传功能及表单标签错误排查

一只小鹿

发布时间：2026-10-16 | 3人浏览过

原创

本文介绍如何使用Django框架实现前端页面文件上传功能。详细解析urls.py路由配置、views.py中处理POST请求及文件保存逻辑，以及HTML模板中action与csrf_token的设置。重点排查了因HTML标签拼写错误（from误写）导致的提交失败问题，提供完整的代码示例与调试步骤。

Django文件上传项目结构概览

首先梳理项目的基本目录结构。

mynode -> app5 -> urls.py & views.py
| -> templates -> 5 -> upload.html
| -> mynode -> urls.py
| -> media

URL路由配置与视图映射

按照开发顺序，首先配置app5/urls.py文件。

from django.urls import path
from app5 import views as v5
app_name = 'app5'
urlpatterns = [
    path('upload_file/', v5.upload_file, name = 'upload_file'),
    path('show_upload/', v5.show_upload, name = 'show_upload'),
]

在urlpatterns中定义两条路径：path('upload_file/', v5.upload_file, name = 'upload_file')用于指定上传文件的处理视图，path('show_upload/', v5.show_upload, name = 'show_upload')用于指定显示初始页面的视图。

视图逻辑：文件接收与保存

接着配置app5/view.py文件中的视图逻辑。

from django.shortcuts import render
from django.http import HttpResponse
import os
def show_upload(request):
  return render(request, '5/upload.html')
def upload_file(request):if request.method == 'POST':
    get_file = request.FILES.get('myfile',None)
    if get_file:
      path = 'media/uploads'
      if not os.path.exists(path):
        os.makedirs(path)
      dest = open(os.path.join(path,get_file.name),'wb+')
      for chunk in get_file:
        dest.write(chunk)
      dest.close()
      return  HttpResponse('上传文件成功！')
    else:
      return HttpResponse('没有上传文件！')

首先定义show_upload方法，该方法负责渲染并跳转到初始页面。

随后定义upload_file方法。该方法首先检查HTTP请求方式是否为POST，若符合则获取上传的文件对象，指定存储路径。如果该路径不存在，则自动创建目录，并将上传文件的内容分块写入指定路径下。

前端模板与表单处理

接下来配置templates/5/upload.html模板文件。

<!--<from enctype="multipart/form-data" action="{% url 'app5:upload_file' %}" method="post">--> //这个是错误的
<form enctype="multipart/form-data" action="{% url 'app5:upload_file' %}" method="post">
    {% csrf_token %}
    <input type="file" name="myfile" />
    <br/>
    <input type="submit" value="upload_file" />
</form>
<!--</from>--> //这个是错误的

在HTML表单中指定action属性为{% url 'app5:upload_file' %}。其中app5对应app5/urls.py中设置的app_name，upload_file对应路由名称。由于URL已映射到views中的upload_file方法，因此点击提交时将触发该视图逻辑。

页面展示正常，但在功能开发完成后，无论点击提交按钮多少次，都无法成功跳转到upload_file处理逻辑。

仔细检查表单标签，发现名称拼写错误为<from，这是一个常见的低级错误。修正为<form后，功能恢复正常。

根路由配置与功能测试

最后配置项目根目录下的mynode/urls.py文件。

from django.contrib import adminfrom django.urls import path,include

urlpatterns = [
  path('admin/', admin.site.urls),
  path('app5/', include('app5.urls')),
]

在根路由中指定将app5相关的请求转发到app5/urls.py，使用include('app5.urls')实现。

启动服务器后，在浏览器中输入链接http://localhost:8000/app5/show_upload/访问初始页面。