文件的上传与下载
文件上传流程与协议规范
文件上传流程
- 客户端通过
html
给出一些操作方式(点击按钮、拖拽),选择本地图片。点击提交,准备上传。 - 客户端需要与服务端建立
http
连接,客户端遵守http
协议提交请求数据(请求数据包中可能包含基本表单数据,还可能包含需要上传的二进制文件)。 - 服务端接收请求,遵守
http
协议,接收客户端传过来的所有数据,基本表单数据直接读取,文件则以数据流的方式 边读取边存储到服务端某个目录下。 - 文件存储完成后,服务端应该提供一个用于访问刚上传的图片的一个链接地址,返回给客户端,这样客户端可以使用该地址完成后续业务。
文件上传的协议规范
- 文件上传请求必须是
post
请求。 - 发请求时,需要在请求数据包中添加
header
:Content-Type:multipart/form-data
- 客户端在请求数据包中绑定文件数据:key:value (字段名:文件对象),发送请求。
- 服务端接收请求,读取请求中的请求参数,通过key,获取上传的文件数据流,边读取边保存到服务端磁盘中。
实现基于elementui
组件库中的el-upload
组件,实现文件上传。
-
新建脚手架项目。
-
安装配置
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)
-
在组件页面中,使用
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
组件提供的功能很多,详情查阅官方文档。