File upload demo based on ThinkJS.
npm install
npm start
FormData + ajax
canvas 读取生成 image
原理:canvas.toDataURL实现压缩
实现:FileReader读取文件内容转为img --> canvas读取img --> 输出压缩后的img --> 转为 Blob 对象上传
原理:利用 file.slice 将文件分片
实现:
客户端:文件分片 --> 将分片上传 --> 完成所有分片上传 --> 通知服务端合并文件
服务端:接收分片 --> 存储同组分片 --> 接收客户端合并请求 --> 合并并存储文件 --> 删除分片
注意点:
分片分组:这里我在前端将同一组的分片的 file.name 设置成同一个uuid,这样后端将同一组的分片 存到同一个临时文件夹中
分片顺序:前端会带一个 order 参数,后端会生成文件名为 ${order}-${uuid} 名称的分片,这样合并文件的时候会直接按顺序合并