已经0点了，我还是睡不着。

前言

  • 在业务中给，文件的上传和下载是常见的交互场景。
  • 如上传入库比较大的Excel表格数据、 上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更 多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。

文件上传方式

普通表单上传

  • 首先构建文件上传的表单，并指定表单的提交内容类型为enctype="multipart/form-data"，表明表单需要上传二进制数据。

  • 简单页面如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>Title</title>
      </head>
      <body>
        <h4>{{ error_message }}</h4>
        <form action="/index/" method="post" enctype="multipart/form-data">
          {% csrf_token %}
          <p><input type="file" name="up_file" /></p>
          <input type="submit" />
        </form>
      </body>
    </html>

form表单上传大文件时，很容易遇见服务器超时的问题。通过xhr，前端也可以进行异步上传文件的操作，一般由两个思路。