【文件属性】:
文件名称:百度地图毕业设计源码-upload-files:上传文件,可分片上传、断点续传、暂停/恢复等
文件大小:227KB
文件格式:ZIP
更新时间:2021-06-06 06:33:05
系统开源
百度地图毕业设计源码
文件上传(支持分片上传、断点续传、秒传、暂停/恢复、进度条等)
背景
在我们的项目开发中基本上都会有上传文件的需求。通常我们使用
ajax
+
formData
的方式将文件上传到指定的服务器上。出于对存储压力的考虑,一般上传的文件也都不会很大,会限制在几M
~
几十M以内。
然而,上传大文件的需求肯定会存在的,比如视频上传业务。一个视频可能高达好几个G,那么就必须要面临这样的问题:一是上传时间过长,中间一旦发生错误就会导致整个上传任务失败;二是服务端处理起来也很麻烦,要配置超大表单的处理、超时的问题等等。
这时候,比较好的方式是前端在上传大文件时,将文件进行切片,分片上传到服务器,再由服务端进行合并。这样做可以避免一旦发生错误需要整个文件重传,同时,服务端也简化了复杂的配置。
那么,下面我们就来实现一下支持分片上传、断点续传、秒传、暂停/恢复、进度条等功能的文件上传功能。
附项目地址:
前端部分
技术栈:react
+
antd
3.x
+
typescript
创建项目
其中高级配置可按照antd官网来进行配置,这里不做赘述
mkdir
upload-file
【文件预览】:
upload-files-master
----client()
--------package.json(1KB)
--------src()
--------tsconfig.json(491B)
--------.gitignore(310B)
--------public()
--------README.md(2KB)
--------yarn.lock(502KB)
--------.vscode()
----server()
--------package.json(942B)
--------src()
--------tsconfig.json(817B)
--------.gitignore(310B)
--------.vscode()
----.gitignore(310B)
----README.md(18KB)