文件上传
- 文件上传指的是:客户端上传文件至服务器
1. 前端代码
前端用来提交文件;如下,input_file.html
<form action="{% url 'index' %}" method="post" enctype="multipart/form-data">
<input type="file" name="pic"><br>
<input type="submit">
</form>
- form标签用于提交上传的文件数据
– 需要规定发起请求的方式为post,method=post
– 需要规定enctype,enctype='multipart/form-data'
- input标签用户客户端选择提交的文件
– 需要规定type属性,type='file'
– 需要设置name属性,该属性值任意,本案例中设置为name='pic'
该name属性的值,将用于后端获取提交的表单数据
2. 后端代码的实现
2.1 接收并保存文件;
# 渲染前端页面
def render_html(request):
return render(request, 'input_file.html')
# 获取客户端提交的表单数据,并保存
def get_files(request):
# 获取客户端提交的文件数据
mypic = request.FILES.get('pic')
# 将文件写入到指定的位置
with open('this_pic.jpg', 'wb') as f:
for chunk in mypic.chunks()
f.write(chunk)
return HttpResponse('success')
2.2 使用数据库记录文件存储的位置
# models.py
class PicModel(models.Model):
# 通过upload_to参数,制定文件存储的位置
pic = models.FileField(upload_to="files")
# views.py
def render_html(request): # 渲染前端页面
return render(request, 'input_file.html')
def get_files(request): # 获取客户端提交的表单数据,并保存在指定位置,记录存储地址
pic_file = request.FILES.get('thumbnail')
obj = PicModel(pic=pic_file)
obj.save()
return HttpResponse('success')
此时,会将文件保存至files中,数据库中pic字段存储的是文件的路径;
其中FileField(upload_to="files")
,中upload_to
指定了文件存储的路径;
2.3 使用MEDIA_ROOT指定文件存储的位置
在settings.py
中可以通过设置MEDIA_ROOT
, 指定文件存储的位置。如下, 指定MEDIA_ROOT='media'
, 则服务器接收到文件后, 将会把文件存储在media
路径下
# settings.py
MEDIA_ROOT = os.path.join(BASE_DIR,'media')
# 指定文件存储在当前项目路径下的media文件夹中
# urls.py
from django.urls import path
from front import views
urlpatterns = [
path('1/', views.render_html)
path('2/', views.get_files),
]
# models.py
class PicModel(models.Model):
# 此时不需要再指定upload_to参数了
pic = models.FileField()
如果同时指定了upload_to='files'
和MEDIA_ROOT=os.path.join(BASE_DIR,'media')
则会将文件上传至当前项目路径/media/files
路径中;
2.4 通过指定MEDIA_URL线上查看上传的文件
# settings.py
MEDIA_URL = '/media/'
# urls.py
from django.urls import path
from front import views
from django.conf.urls.static import static
from django.conf import settings
urlpatterns = [
path('1/', views.render_html),
path('2/', views.get_filtes)
] + static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
debug模式下可以通过http://127.0.0.1:8000/media/文件名
在线查看文件