手把手教你前端的各種文件上傳攻略和大文件斷點續傳

在前面

今年國慶假期終于可以憋在家里了不用出門了，不用出去看后腦了，真的是一種享受。這么好的光陰怎么浪費，睡覺、吃飯、打豆豆這怎么可能（耍多了也煩），完全不符合我們程序員的作風，趕緊起來把文章寫完。

這篇文章比較基礎，在國慶期間的業余時間寫的，這幾天又完善了下，力求把更多的前端所涉及到的關于文件上傳的各種場景和應用都涵蓋了,若有疏漏和問題還請留言斧正和補充。

自測讀不讀

以下是本文所涉及到的知識點，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/

ess和Sass主要是解決了一個模塊化的問題，但是還有一個全局的樣式的污染問題。我今天個人分享的就是關于PostCss的一些個人理解。

PostCss

PostCss是Autoprefixer的開發者Andrey Sitnik開發的，它最初是一個通過JavaScript來處理CSS 的方法。

可以理解為一種插件系統（類似于css領域的webpack），它本身只是一個API，作為一個API它可以創建任何需要的插件和工具。

PostCss有兩個概念：pre-processor（預處理器）和post-processor（后處理器）。

像Sass、Less和Stylus都是屬于預處理器的范疇，按照預處理器的語法來寫css的代碼，最后交由預處理器的編譯器編譯成一個傳統的css，這個就叫做預處理器。

post-processor（后處理器）就是我們把css代碼寫完之后，交由它去處理，添加一些必要的屬性，比如比較典型的：CSS Prefixer，會加上一些瀏覽器的前綴。

官方定義

PostCSS is a tool for transformimg CSS with JS plugins.

These plugins can support variables and mixins,transpile future CSS syntax,inline images,and more.

翻譯過來的意思就是說呢，PostCSS是一個用JS插件轉換css的工具。這些插件可以支持變量和混合，轉換成未來的css語法，內聯圖像等。我們可以把PostCss理解成一個管道，然后在管道各處可以放一些插件，然后從管道經過的css都會經過插件的處理。實際上PostCss它將css代碼轉換成抽象的一個語法結構AST，就是一個對象的一個樹，然后方便插件處理。

PostCss定位和使用

PostCss是一個插件系統，所以它既不是預處理器也不是后處理器，類似于css領域的webpack、Grunt和Gulp進行集成。它的作用就是整合預處理器和后處理器。

關于PostCss的使用，一般是不單獨使用的，與已有的構建工具集合；比如webpack、Grunt和Gulp。

最廣泛的PostCss使用是與webpack集成。

與webpack集成

1 搭建環境

得到一個package.json文件

npm init

06-18-01

安裝webpack依賴包

npm install webpack webpack-cli --save-dev

--save表示會把依賴保存在package.json的文件里面來，然后-dev就會保存到devDependencies里面。

注意：”script“：{“bulid”："webpack --config webpack.config.js"}意思就是說在運行webpack，--config表示指定配置文件，webpack.config.js 配置文件名。

配置webpack.config.js

06-18-02

06-18-03

打包index.js

npm run build

分離css

因為要查看PostCss打包的一個效果，所以分離css是一定需要的。

需要安裝的插件：

npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install postcss-loader --save-dev

PostCss 常見插件介紹

autoprefixer

自動添加瀏覽器前綴，這個插件是根據can i use解析css并且為其添加瀏覽器廠商前綴的PostCss插件。

caniuse（https://www.caniuse.com ）是一個網站，我們可以在這個網站里面知道我們所使用的一個屬性的瀏覽器的支持情況。

npm install autoprefixer --save-dev

安裝之后添加到webpack.config.js下面的loader里面

stylelint

強制開發人員按照團隊css規范來寫css樣式的工具，類似的eslint（JS的規范）。

npm install stylelint stylelint-config-lost stylelint-config-standard --save-dev

它是一個強大的，現代的linter，可以幫助您避免錯誤并在您的樣式中強制執行約定。為什么是強大的呢？因為它的特征：

了解最新的CSS語法，包括自定義屬性和4級選擇器
從HTML，markdown和CSS-in-JS對象和模板文字中提取嵌入式樣式
解析類似CSS的語法，如SCSS，Sass，Less和SugarSS
擁有超過170條內置規則來捕獲錯誤，應用限制并強制執行風格約定
支持插件，因此您可以創建自己的規則或使用社區編寫的插件
自動修復一些違規行為（實驗性功能）
是很好的測試超過10000的單元測試
支持可共享的配置，您可以擴展或創建自己的配置
被unopinionated這樣你就可以定制棉短絨您的確切需求
有一個不斷增長的社區，[Facebook]，[GitHub]和[WordPress使用]

關于它更多的介紹可以通過（https://stylelint.io/ ）官網了解一下。

postcss-cssnext（https://cssnext.github.io/ ）

npm install postcss-cssnext --save-dev

postcss-modules

以模塊化方式實現Css, 重點在于解決了樣式沖突

npm install postcss-modules --save-dev

lost

強大的PostCSS網格系統

npm install lost --save-dev

文章主要介紹了PostCss的定位，結合webpack介紹了PostCss主要的幾個插件：autoprefixer、postcss-cssnext、postcss-modules、lost、stylelint。文章可能存在很多不足，閱讀的小伙伴們看到了可以稍作提示或者哪里有錯誤的可以私信告訴我糾正過來，O(∩_∩)O謝謝。

ostcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

3 . 自動把px代為轉換成rem

4 . css 代碼壓縮等等

postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。

與 less sass 的區別

less sass 是預處理器，用來支持擴充css語法。

postcss 既不是預處理器也不是后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

npm install postcss-loader –save-dev

2 . webpack配置

一般與其他loader配合使用，下面*標部分才是postcss用到的

配合時注意loader的順序（從下面開始加載）

3 . postcss配置

項目根目錄新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前綴補全，全自動的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個版本的css語法【關于語法另一篇文章會單獨講】

安裝：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px轉換成rem

安裝：

cnpm install postcss-pxtorem --save-dev

配置項：

特殊技巧:不轉換成rem

px檢測區分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem

原理

工作流

大致步驟：

將CSS解析成抽象語法樹(AST樹)
將AST樹”傳遞”給任意數量的插件處理
將處理完畢的AST樹重新轉換成字符串

在PostCSS中有幾個關鍵的處理機制：

Source string → Tokenizer → Parser → AST → Processor → Stringifier

Tokenizer

將源css字符串進行分詞

舉個例子：

.className { color: #FFF; }

通過Tokenizer后結果如下：

[
    ["word", ".className", 1, 1, 1, 10]
    ["space", " "]
    ["{", "{", 1, 12]
    ["space", " "]
    ["word", "color", 1, 14, 1, 18]
    [":", ":", 1, 19]
    ["space", " "]
    ["word", "#FFF" , 1, 21, 1, 23]
    [";", ";", 1, 24]
    ["space", " "]
    ["}", "}", 1, 26]
]

以word類型為例，參數如下：

const token = [
     // token 的類型，如word、space、comment
    'word',

    // 匹配到的詞名稱
    '.className',

    // 代表該詞開始位置的row以及column，但像 type為`space`的屬性沒有該值
    1, 1,

    // 代表該詞結束位置的row以及column，
    1, 10
]

Parser

經過Tokenizer之后，需要Parser將結果初始化為AST

this.root = {
    type: 'root',
    source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
                   start: { line: 1, column: 1 } ,
                  end: { line: 1, column: 27 }
    },
   raws:{after: "", semicolon: false}
   nodes // 子元素
}

Processor

經過AST之后，PostCSS提供了大量JS API給插件用

Stringifier

插件處理后，比如加瀏覽器前綴，會被重新Stringifier.stringify為一般CSS。

參考：
https://segmentfault.com/a/1190000017886402
https://www.jianshu.com/p/288963680642

作者：指尖跳動
鏈接：https://www.jianshu.com/p/9a9048bc8978
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

在線咨詢

上一篇：官宣！雄安公開征集工程建設項目評標專家
下一篇：自己實現一個web前端分頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商