文件上传的本质就是把本地的文件复制到服务端,那么客户端和服务端要怎样操作才能完成这个复制过程呢,这一篇我们就一起来看看。
我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。
文章目录
基本上传文件
客户端配置
页面的表单利用<input type="file" name="">
来上传文件,不过需要注意的是,要想让服务端能成功接收到文件,需要给表单加一个额外的配置就是enctype="multipart/form-data"
。
同时,如果要允许一次性上传多个文件,可以给input
加上multiple
属性。
而要限制上传的文件MIME类型,可以给input
加上accept
属性。
创建一个h5页面upload_file.html
如下备用,允许上传多个文件,同时限制了文件类型MIME
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Upload File</title>
</head>
<body>
<form action="{% url 'four:upload_file' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
<label for="upload">File:</label><input type="file" id="upload" name="upload" multiple accept="image/jpeg,text/plain"><br>
<input type="submit">
</form>
</body>
</html>
这里的{% csrf_token %}
是为了防止csrf嵌入的标志,不加这个标志无法使用post方法。
UploadedFile类
在view函数中通过HttpRequest.FILES
来获取上传的所有文件,类似HttpRequest.POST
,也是通过字典的方式来进行访问,字典的key是h5页面中<input type="file">
的name
名,而字典的value是一个UploadedFile类的实例。
根据官方文档,有下面几种方法获取上传文件的内容
-
UploadedFile.read()
一次读取文件的所有内容,一般不使用这个方法因为一旦上传的文件过大,可能会使得内存溢出 -
UploadedFile.multiple_chunks(chunk_size=None)
如果上传的文件过大以至于需要分多个trunk来读取,这个方法会返回True,这个大小的临界点默认是2.5MB,可配 -
UploadedFile.chunks(chunk_size=None)
一个包含文件所有trunk的生成器,当上面的UploadedFile.multiple_chunks()==True
的时候,通过在一个循环中读取每个trunk来获取文件而不是通过上面的UploadFile.read()
。根据官方文档,推荐在任何情况下使用本方法来读取文件内容,经过我自己的测试,即使上面的UploadedFile.multiple_chunks()==False
的时候也是没问题的
同时还有下面几种属性可以调用
-
UploadedFile.name
上传文件的文件名,包含后缀 -
UploadedFile.size
单位为bytes的文件大小 -
UploadedFile.con