GitHub 地址：https://github.com/BadWaka/upload-file
參考文章：HTML上傳文件的多種方式
實現(xiàn)上傳文件（node 版本）
包括：
- 同步（h5表單）
- 異步（ajax）
Get Start
前置條件：需要安裝 node v4 版本以上
- clone 倉庫代碼
git clone https://github.com/BadWaka/upload-file.git
- 進入代碼目錄，安裝所需依賴
cd upload-file
npm i
- 執(zhí)行 node server.js控硼，啟動服務(wù)
node server.js
-
在瀏覽器打開 http://localhost:12345/sync.html 即可看到同步上傳頁面
-
在瀏覽器打開 http://localhost:12345/async.html 即可看到異步上傳頁面
-
選擇文件后點擊上傳即可看到效果泽论，在代碼倉庫的 uploads 目錄下即可看到所上傳的文件
原理
服務(wù)端
服務(wù)端是使用 express 框架和庫 multer 實現(xiàn)的文件上傳功能
請求經(jīng)過 multer 這個中間件，可以通過 req.files 或者 req.file 獲得要上傳的文件的信息卡乾，再通過 fs 模塊寫入到磁盤上
前端
同步原理
使用 h5 原生表單翼悴，form 配合 input[file]、input[submit]幔妨，指定接口（action）鹦赎，很輕松的實現(xiàn)
異步原理
-
監(jiān)聽 input[file] 元素的 onchange 事件，在選擇文件完成后獲取 fileList 文件列表對象
-
通過 ajax 和 formData 構(gòu)建請求误堡，請求后端接口
-
可以通過 xhr.onload.onprogress 來獲取上傳的進度百分比
-
