GitHub 地址：https://github.com/BadWaka/upload-file
参考文章：HTML上传文件的多种方式
实现上传文件（node 版本）
包括：
- 同步（h5表单）
- 异步（ajax）
Get Start
前置条件：需要安装 node v4 版本以上
- clone 仓库代码
git clone https://github.com/BadWaka/upload-file.git
- 进入代码目录，安装所需依赖
cd upload-file
npm i
- 执行 node server.js，启动服务
node server.js
-
在浏览器打开 http://localhost:12345/sync.html 即可看到同步上传页面
-
在浏览器打开 http://localhost:12345/async.html 即可看到异步上传页面
-
选择文件后点击上传即可看到效果，在代码仓库的 uploads 目录下即可看到所上传的文件
原理
服务端
服务端是使用 express 框架和库 multer 实现的文件上传功能
请求经过 multer 这个中间件，可以通过 req.files 或者 req.file 获得要上传的文件的信息，再通过 fs 模块写入到磁盘上
前端
同步原理
使用 h5 原生表单，form 配合 input[file]、input[submit]，指定接口（action），很轻松的实现
异步原理
-
监听 input[file] 元素的 onchange 事件，在选择文件完成后获取 fileList 文件列表对象
-
通过 ajax 和 formData 构建请求，请求后端接口
-
可以通过 xhr.onload.onprogress 来获取上传的进度百分比
-
