前言：从浏览器输入网址到回车看到页面的过程，面试逃不掉的一个问题，我们知道从浏览器输入网址到看到页面主要是涉及DNS解析，TCP三次握手，请求报文，响应报文，TCP4次挥手。

#首先我们先来看一下总体的访问过程

#总体的访问过程：首先会进行DNS解析，然后解析得到地址之后客户端和web服务器会建立一条TCP连接，其中有一个TCP三次握手过程，当完成握手之后客户端就会向浏览器发送一条请求报文，服务器然后进行响应，接着当数据传输完之后，服务器和客户端有一个TCP四次挥手过程，来结束连接。

#然后我们来将过程分解一下

#dns解析流程

在浏览器中输入网址回车后，首先系统会去找这个域名对应的ip，然后再根据这个ip地址查找web服务器，
这里面有个DNS解析流程
        1、系统首先查找本地的DNS缓存和hosts文件信息，确认是否有www.baidu.com对应的ip地址，如果有就直接访问
        这个ip地址对应的www.baidu.com web服务器
        2、如果没有，那么系统会将解析请求发送给本机网卡指定的DNS服务器，称为LDNS（本地dns），如果本地DNS服务器
        中有域名www.baidu.com所对应的的ip地址，就会去访问这个IP对应的web服务器，如果没有就去请求其他DNS服务器
        3、LDNS服务器会从根域名服务器开始对于域名www.baidu.com的解析，全球有13台根服务器，根域名服务器没有
        www.baidu.com的解析记录，有.com顶级域的解析记录，然后把.com所对应的DNS服务器地址返回给LDNS服务器
        4、LDNS获取到.com的DNS服务器地址之后，就去.com服务器请求www.baidu.com域名的解析，.com里面也没有www
        .baidu.com域名对应的地址，但是有baidu.com域名的解析记录，然后.com服务器将baidu.com对应的DNS服务器地址
        返回给LDNS，
        5、同理LDNS去找baidu.com的DNS服务器请求www.baidu.com的域名解析，然后baidu.com域名DNS服务器将www.baidu.com地址对应的IP解析记录发送回给LDNS
        6、LDNS把解析出的结果www.baidu.com对应的ip地址发送给客户端的浏览器，然后也记录到缓存中

#浏览器通过解析后得到的ip地址和端口号与web服务器建立一条TCP连接通道

#tcp3次握手过程

三次握手指一个TCP连接时，需要客户端和服务器总共发送3个包
    第一次握手：建立连接时，客户端A发送syn包（syn=j）到服务器B,并进入Syn_send状态，等待服务器B确认
    第二次握手：服务器B收到syn包，必须确认客户A的syn（ACK=j+1）,同时自己也发送一个SYN包（syn=k），即SYN+ACK包，然后服务器B进入SYN_RECV状态
    第三次握手：客户端A收到服务器B的SYN+ACK包，向服务器B发送确认包ACK(ACK=k+1),包发送完毕，客户端A和服务端B进入ESTABLISHED状态，完成三次握手

#建立TCP连接时，浏览器向web服务器发送一条HTTP请求报文

请求报文包括：请求行，请求头部，空白行，请求报文主体
    请求行：
        用来说明客户端想要做什么，内容包括方法字段（请求方法包括：GET:请求指定资源，HEAD，请求响应报文的首部，
        POST：提交数据到服务器，PUT：传送的数据取代指定的文档内容，DELETE：删除Request-URI所标识的资源，MOVE:
        移动）、URL字段以及HTTP协议版本（最开始的0.9版本，后来又有了1.0,1.1,2.0，其中1.1是主流）
        
    请求头：
        通过客户端把请求的相关信息发给服务器，内容包括媒体类型，语言类型，主机名等信息
    
    空行：
        告诉服务器空行以下内容不属于请求头部信息
    
    请求报文主体：
        用来说明客户端具体想要做的事情

#有请求报文来请求服务器，就会有服务器端去响应，为响应报文

 响应报文包括：状态行，响应头部，空白行，响应报文主体
    状态行
        用来说明服务器响应客户端的状态，包括一些状态码信息：一些比较重要的状态码信息有：
            200-ok                        访问成功
            301-moved permanently       永久跳转
            403-Forbidden                   禁止访问，服务端设置了相关权限，客户端没有权限去访问
            404-Not Found                    没有找到访问的页面，客户端请求的页面不存在
            500-Internal servr error    内部服务器错误
            502-Bad gateway                坏的网关
            503-Service Unavailble        服务不可用，服务超载或停机
            504-Gateway Timeout            网关超时，没有在特定时间内处理请求
        
    响应头将服务器响应的相关信息发给客户端
        
    空行：
        告诉客户端空行一下内容不属于响应头部信息
        
    响应报文主体：
        将web服务数据资源返回给客户端
            包括静态网页资源，动态网页资源，和伪静态资源
            纯html格式的为静态网页，服务端写的什么就返回什么给客户端
            常见的静态网页后缀有html htm xml
            
            以.php .js .aspx结尾的为动态网页，以数据库为基础，可以实现很多功能
            
            伪静态网页是通过一些技术（如rewrite重写）将动态的URL伪装成静态的URL，但实际上还是动态的URL

#当完成数据传输之后，就会有一个四次挥手的过程来进行断开连接

#tcp4次挥手过程

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

• 文件上传原理
• 最原始的文件上传
• 使用 koa2 作为服务端写一个文件上传接口
• 单文件上传和上传进度
• 多文件上传和上传进度
• 拖拽上传
• 剪贴板上传
• 大文件上传之分片上传
• 大文件上传之断点续传
• node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

• 请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

• 消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的 名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

• ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
• 获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http=require('http');
var koaStatic=require('koa-static');
var path=require('path');
var koaBody=require('koa-body');//文件保存库
var fs=require('fs');
var Koa=require('koa2');

var app=new Koa();
var port=process.env.PORT || '8100';

var uploadHost=`http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx)=> {
    var file=ctx.request.files.f1;//得道文件对象
    var path=file.path;
    var fname=file.name;//原文件名称
    var nextPath=path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr=fname.split('.');
        var ext=extArr[extArr.length-1];
        var nextPath=path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body=`{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server=http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/