基于js管理大文件上传以及断点续传

释放双眼,带上耳机,听听看~!

前言

前端小伙伴们平常在开发过程中文件上传是经常遇到的一个问题,也许你能够实现相关的功能,但是做完后回想代码实现上是不是有点”力不从心”呢?你真的了解文件上传吗?如何做到大文件上传以及断电续传呢,前后端通讯常用的格式,文件上传进度管控,服务端是如何实现的?接下来让我们开启手摸手系列的学习吧!!!如有不足之处,望不吝指教,接下来按照下图进行学习探讨

一切就绪,开始吧!!!

前端结构

  • 页面展示

image.png

  • 项目依赖

依赖.png

后端结构(node + express)

  • 目录结构

    后台代码.png

  • Axios的简单封装

文件上传一般是基于两种方式,FormData以及Base64

基于FormData实现文件上传

基于BASE64实现文件上传

BASE64具体方法

  • 首先需要把文件流转为BASE64,这里可以封装一个方法

  • 具体实现

上面这个例子中后端收到前端传过来的文件会对它进行生成一个随机的名字,存下来,但是有些公司会将这一步放在前端进行,生成名字后一起发给后端,接下来我们来实现这个功能

前端生成文件名传给后端

这里就需要用到上面提到的插件SparkMD5[1],具体怎么用就不做赘述了,请参考文档

  • 封装读取文件流的方法

  • 上传服务器相关代码

上传进度管控

这个功能相对来说比较简单,文中用到的请求库是axios,进度管控主要基于axios提供的onUploadProgress函数进行实现,这里一起看下这个函数的实现原理

  • 监听xhr.upload.onprogress

    监听.png

  • 文件上传后得到的对象

    xhr.png

  • 具体实现

大文件上传

大文件上传一般采用切片上传的方式,这样可以提高文件上传的速度,前端拿到文件流后进行切片,然后与后端进行通讯传输,一般还会结合断点继传,这时后端一般提供三个接口,第一个接口获取已经上传的切片信息,第二个接口将前端切片文件进行传输,第三个接口是将所有切片上传完成后告诉后端进行文件合并

  • 进行切片,切片的方式分为固定数量以及固定大小,我们这里两者结合一下

  • 发送至服务端

  • 文件上传 + 断电续传 + 进度管控

服务端代码(大文件上传+断点续传)

总结

综上是我对文件上传的总结,能力有限,如有错误,望不吝指教,最后送上一句话:

夫学须静也,才须学也,非学无以广才,非志无以成学。淫慢则不能励精,险躁则不能治性。年与时驰,意与日去,遂成枯落

转载于:WEB 前端学习圈
来源于:WEB 前端学习圈
原文转载|如需授权/请联系帖主!
如若侵权/请联系审核员删帖!

给TA买糖
共{{data.count}}人
人已赞赏
前端技术

前端九条 bug 分享 (ts相关知识较多)

2021-12-22 23:04:10

前端技术

如何写出让同事无法维护的代码?(文中推荐做法)

2021-12-22 23:31:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索