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

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

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

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

先說一下需求和功能點：

需求：上傳文件到服務器
功能：上傳

單這么看是簡單的，下面再補充一下：

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

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

還是說說我遭遇的較為復雜的需求：

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

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

就目前需求能看出功能點是串行的，如下：

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(/*記錄數據*/).catch(...);

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

//上傳類
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(/*記錄數據*/).catch(...);

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

云服務器 GPU云服務器手札前端上傳form表單前端js圖片上傳教程上傳圖片到服務器前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79214.html

前端臨床手札——webpack構建逐步解構（上）

摘要：前言由于博主最近又閑下來了，之前覺得的官方文檔比較難啃一直放到現在。文章會逐步分析每個處理的用意當然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會補上構建生產的配置分析，案例參考。前端臨床手札構建逐步解構下前言由于博主最近又閑下來了，之前覺得webpack的官方文檔比較難啃一直放到現在。細心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架，當然這個案例是基于vue的，...

lowett 2019-08-22 10:36 評論0 收藏0
前端臨床手札——webpack構建逐步解構（下）

摘要：續(xù)前端臨床手札構建逐步解構上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細可以看分支構建生產上一篇說完了本地測試和是如何工作，接下來分析構建生產模式下配置如何配置和每個模塊干了什么。續(xù) 前端臨床手札——webpack構建逐步解構（上）工作流程 showImg(https://segmentfault.com/img/bVCXjo?w=793&h=410); 案例：multip...

TerryCai 2019-08-22 10:37 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執(zhí)行的測試用例實現代碼。測試工具斷言庫測試驅動開發(fā)及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發(fā)現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

kid143 2019-08-19 18:17 評論0 收藏0
前端臨床手札——單元測試

摘要：感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。具體執(zhí)行的測試用例實現代碼。測試工具斷言庫測試驅動開發(fā)及測試框架入門學習最近博主工作是和另一枚后端合作，但是經常發(fā)現他寫的接口出錯，苦逼連連。感覺不能這樣下去就學寫一下單元測試，等他更新代碼我都跑一遍確認一下，這樣工作安心多了。經過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...

godlong_X 2019-05-29 16:57 評論0 收藏0
前端臨床手札——在微信播放視頻的那些事

摘要：然而我真的太天真，微信瀏覽器怎樣會讓你這樣好過問題集中于自動播放視頻這塊，需求很簡單自動播放全屏不顯示工具條自動播放一步步來，自動播放這個問題在十分肯定默認是不支持的，必須基于用戶操作下才能加載視頻。至于在微信下和一個樣。某天收到舊同事的信息說希望我?guī)褪肿鲆幌乱粋€簡單的H5，然后我看了看的確很簡單：就是圖片滾動到最后自動播放視頻，播完顯示個按鈕交互。然而我真的太天真，微信瀏覽器怎...

_Zhao 2019-06-21 16:15 評論0 收藏0