引导
- Axios用法「包含基础的二次封装」& 前后端通信常用数据格式
- 基于FileReader实现文件读取和相关处理
- 基于spark-md5实现文件名的生成
- 掌握上传文件大小或者格式等限制的处理
- 实现上传文件的缩略展示
- 掌握文件上传的两种经典方案：FormData & BASE64
- 实现上传进度的展示和管控
- 实现文件拖拽上传的功能
- 大文件切片上传的实现及优化
- 多文件上传及进度管控
- 断点续传实现的方案及原理
- 了解服务器端是如何基于Node+Express+multiparty管理文件上传的
- ……
数据格式
post 传参 请求主体
get 传参 问号传参
- 请求主体（Request Body）通常以JSON格式传递给服务器。在HTTP协议中，请求主体是客户端向服务器发送的请求数据。这些数据通常包括表单数据、JSON数据或其他二进制数据
- 请求主体传递给服务器的数据格式：
- json字符串 /
- 普通文本字符串/
- Buffer....
Axios二次封装
let instance = axios.create() instance.defaults.baseURL = 'http://127.0.0.1:8888' instance.defaults.headers['Content-Type'] = 'multipart/form-data' instance.defaults.transformRequest = (data, headers) => { const contentType = headers['Content-Type'] if (contentType === 'application/x-www-form-urlencoded') return Qs.stringify(data) return data } instance.interceptors.response.use((response) => { return response.data })
<div class="item"> <h3>单一文件上传「FORM-DATA」</h3> <section class="upload_box" id="upload1"> <!-- accept=".png" 限定上传文件的格式 --> <input type="file" class="upload_inp" accept=".png,.jpg,.jpeg"> <div class="upload_button_box"> <button class="upload_button select">选择文件</button> <button class="upload_button upload">上传到服务器</button> </div> <div class="upload_tip">只能上传 PNG/JPG/JPEG 格式图片，且大小不能超过2MB</div> <ul class="upload_list"> <!-- <li> <span>文件：...</span> <span><em>移除</em></span> </li> --> </ul> </section> </div>
