zoukankan      html  css  js  c++  java
  • js上传文件夹的解决方案

    一、概述

     

    所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传,需要自己实现。

     

    二、Range 

     

    用于请求头中,指定第一个字节的位置和最后一个字节的位置,一般格式:

     

        Range:用于客户端到服务端的请求,可以通过改字段指定下载文件的某一段大小及其单位,字节偏移从0开始。典型格式:

        Ranges:    (unit=first byte pos)-[last byte pos]

        Ranges:    bytes=4000- 下载从第4000字节开始到文件结束部分

        Ranges:    bytes=0~N 下载第0-N字节范围的内容

        Ranges:    bytes=M-N 下载第M-N字节范围的内容

        Ranges:    bytes=-N 下载最后N字节内容



     

    1.以下几点需要注意:

    (1)这个数据区间是个闭合区间,起始值是0,所以“Range: bytes=0-1”这样一个请求实际上是在请求开头的2个字节。

    (2)“Range: bytes=-200”,它不是表示请求文件开始位置的201个字节,而是表示要请求文件结尾处的200个字节。

    (3)如果last byte pos小于first byte pos,那么这个Range请求就是无效请求,server需要忽略这个Range请求,然后回应一个200,把整个文件发给client。

    (4)如果last byte pos大于等于文件长度,那么这个Range请求被认为是不能满足的,server需要回应一个416,Requested range not satisfiable。

     

    2.示例解释:

    表示头500个字节:bytes=0-499  

    表示第二个500字节:bytes=500-999  

    表示最后500个字节:bytes=-500  

    表示500字节以后的范围:bytes=500-  

    第一个和最后一个字节:bytes=0-0,-1  

    同时指定几个范围:bytes=500-600,601-999 

     

    三、Content-Range

     

    用于响应头,指定整个实体中的一部分的插入位置,他也指示了整个实体的长度。在服务器向客户返回一个部分响应,它必须描述响应覆盖的范围和整个实体长度。一般格式: 

     

    Content-Range: bytes (unit first byte pos) - [last byte pos]/[entity legth] 

     

    四、Header示例

     

    请求下载整个文件: 

     

    GET /test.rar HTTP/1.1 

    Connection: close 

    Host: 116.1.219.219 

    Range: bytes=0-801 //一般请求下载整个文件是bytes=0- 或不用这个头

     

    一般正常回应 

     

    HTTP/1.1 200 OK 

    Content-Length: 801      

    Content-Type: application/octet-stream 

    Content-Range: bytes 0-800/801 //801:文件总大小


    一个最简单的断点续传实现大概如下:

    1.客户端下载一个1024K的文件,已经下载了其中512K

    2. 网络中断,客户端请求续传,因此需要在HTTP头中申明本次需要续传的片段:

    Range:bytes=512000-

    这个头通知服务端从文件的512K位置开始传输文件

    3. 服务端收到断点续传请求,从文件的512K位置开始传输,并且在HTTP头中增加:

    Content-Range:bytes 512000-/1024000

    并且此时服务端返回的HTTP状态码应该是206,而不是200。

    但是在实际场景中,会出现一种情况,即在终端发起续传请求时,URL对应的文件内容在服务端已经发生变化,此时续传的数据肯定是错误的。如何解决这个问题了?显然此时我们需要有一个标识文件唯一性的方法。在RFC2616中也有相应的定义,比如实现Last-Modified来标识文件的最后修改时间,这样即可判断出续传文件时是否已经发生过改动。同时RFC2616中还定义有一个ETag的头,可以使用ETag头来放置文件的唯一标识,比如文件的MD5值。

    终端在发起续传请求时应该在HTTP头中申明If-Match 或者If-Modified-Since 字段,帮助服务端判别文件变化。

    另外RFC2616中同时定义有一个If-Range头,终端如果在续传是使用If-Range。If-Range中的内容可以为最初收到的ETag头或者是Last-Modfied中的最后修改时候。服务端在收到续传请求时,通过If-Range中的内容进行校验,校验一致时返回206的续传回应,不一致时服务端则返回200回应,回应的内容为新的文件的全部数据。


    相关参考链接:http://blog.ncmem.com/wordpress/2019/08/09/http%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0/

  • 相关阅读:
    LTE学习之路(3)——概述(续)
    LTE学习之路(2)——概述
    LTE学习之路(1)——移动通信技术发展历程
    读书笔记:C++ Primer系列(14)—— C++函数及参数传递
    读书笔记:C++ Primer系列(13)—— break、continue、goto语句
    读书笔记:C++ Primer系列(12)—— 类型转换
    qrcodejs二维码合成海报
    vue-core-image-upload 是一款轻量级的 Vue.js 上传插件,它可以支持的图片的上传,裁剪,压缩。它同样也支持在移动端的图片处理,它定义了诸多上传周期,你可以自由的进行流程控制。
    vue-cli按需加载,懒加载组件
    vue-cli 部分浏览器不支持es6的语法-babel-polyfill的引用和使用
  • 原文地址:https://www.cnblogs.com/songsu/p/12096643.html
Copyright © 2011-2022 走看看