前端臨床手札——文件上傳

SexySix 發(fā)布于2019-08-19 18:07 / 2251人閱讀

摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。

文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計是簡單易入門，但是實(shí)際工作時就會發(fā)現(xiàn)上傳文件這個功能上是簡單的，邏輯上卻比較復(fù)雜。

先說一下需求和功能點(diǎn)：

需求：上傳文件到服務(wù)器
功能：上傳

單這么看是簡單的，下面再補(bǔ)充一下：

需求2：
    需要對圖片裁剪壓縮
    文件必須控制在2MB內(nèi)
    上傳文件必須是圖片，包含的文件格式有:jpg、gif、png、jpeg、bmp
    上傳文件到服務(wù)器
    記錄上傳文件（包含文件名字、位置、后綴、大小等）
功能：
    判斷文件格式
    裁剪壓縮圖片
    上傳
    記錄數(shù)據(jù)

也不算復(fù)雜，可是這個從業(yè)務(wù)上來看只是單單的上傳功能而已，用戶可能還會提出更多要求，如：需要可視化信息(顯示上傳進(jìn)度、提示上傳成功或失敗)、選擇上傳位置（或云存儲，如：七牛）、需選擇上傳后的文件等其他需求，~~這就不細(xì)說了~~。

還是說說我遭遇的較為復(fù)雜的需求：

需求3：
    上傳文件
    文件是圖片則上傳到[圖片]倉庫，是視頻則上傳到[視頻]倉庫，其他則上傳到[其他]倉庫
    需要對圖片裁剪壓縮
    文件大于2MB需啟用分片上傳
    上傳至七牛云儲存
    顯示上傳進(jìn)度、提示上傳結(jié)果
    記錄上傳文件（包含文件名字、位置、后綴、大小等）
功能：
    判斷文件格式
    請求相應(yīng)倉庫上傳token
    --圖片--
    獲得文件md5（作為文件名）
    裁剪壓縮圖片
    --視頻--
    判斷文件大小，大于2mb開啟分片上傳
    上傳
    記錄數(shù)據(jù)

這里面包含各種組件間數(shù)據(jù)傳輸、異步數(shù)據(jù)獲取等問題尤為惡心...所以我還是拿需求2這份繼續(xù)下面話題。

就目前需求能看出功能點(diǎn)是串行的，如下：

function upload(file){
    var verify = function(file){ return new Promise(...) },
        cut = function(file){ return new Promise(...) },
        upload = function(file){ return new Promise(...) },
        error = function(){...};
    return verify(file).then(cut).then(upload).catch(error);
}

//file change event
upload(e.currentTarget.files[0]).then(/*記錄數(shù)據(jù)*/).catch(...);

若上傳組件考慮可擴(kuò)展性得把邏輯處理分離出來，邏輯處理也能以組件方式引入其中并予以調(diào)用。但前提是需要約定傳入值和返回類型。

//上傳類
function UploadFile(file){
    this.file = file;
    this.name = file.name;
    this.size = file.size;
    this.toFormData = function(data){...};
}

var uploader = new Uploader(),
    verify = function(uploadFile){ return new Promise(...) },
    cut = function(uploadFile){ return new Promise(...) };
uploader.precondition.add([verify,cut]);

//file change event
var key = function(uploadFile){ return new Promise(...) },
uploader.precondition.add(key); //可添加新條件
uploader.upload(new UploadFile(e.currentTarget.files[0])).then(/*記錄數(shù)據(jù)*/).catch(...);

說這么多概念上的東西為的就是記錄下工作時的真實(shí)情況，需要考慮的不單是功能，還得理解用這個功能的人背后的故事。