文件上传与下载

文件的上传与下载

文件上传流程与协议规范

文件上传流程

1. 客户端通过html给出一些操作方式（点击按钮、拖拽），选择本地图片。点击提交，准备上传。
2. 客户端需要与服务端建立http连接，客户端遵守http协议提交请求数据（请求数据包中可能包含基本表单数据，还可能包含需要上传的二进制文件）。
3. 服务端接收请求，遵守http协议，接收客户端传过来的所有数据，基本表单数据直接读取，文件则以数据流的方式 边读取边存储到服务端某个目录下。
4. 文件存储完成后，服务端应该提供一个用于访问刚上传的图片的一个链接地址，返回给客户端，这样客户端可以使用该地址完成后续业务。

文件上传的协议规范

1. 文件上传请求必须是post请求。
2. 发请求时，需要在请求数据包中添加header： Content-Type:multipart/form-data
3. 客户端在请求数据包中绑定文件数据：key:value (字段名:文件对象)，发送请求。
4. 服务端接收请求，读取请求中的请求参数，通过key，获取上传的文件数据流，边读取边保存到服务端磁盘中。

实现基于elementui组件库中的el-upload组件，实现文件上传。

1. 新建脚手架项目。

2. 安装配置elementui。

   # 执行安装命令
   npm i element-ui -S
   

   main.js中引入：

   // 引入ElementUI
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   // 全量引入所有组件
   Vue.use(ElementUI)
   

3. 在组件页面中，使用el-upload组件，实现上传文件操作。

   <el-upload
              class="upload-demo"
              drag
              action="http://localhost:5000/upload"
              name="uploadFile"
              :on-success="handleUploadSuccess"
              multiple>
       <i class="el-icon-upload"></i>
       <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
       <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
   </el-upload>
   

   el-upload组件提供的功能很多，详情查阅官方文档。