react,vue,js-断点续传实现

388 阅读1分钟

基于昨天的blob初识,今天讲点业务需求,

- 1.完成大文件切片

- 2.完成重复文件过滤

- 3.实现暂停上传

需要源码的可私信哈具体代码太多

显晒草图,后输出逻辑

image.png

第一步完成样式绘画(基本功)

第二步(逻辑梳理)

1.通过组件upload或者原生js的文件选择 获取到文件的几个参数信息

const [fileName, setfileName] = useState(); 文件名

const [fileType, setfileType] = useState(); 文件类型

const [fileSize, setfileSize] = useState(); 文件总大小

const [progress, setprogress] = useState(); 上传进度

const [uploadVal, setuploadVal] = useState(); 这个是判断当前是继续上传 还是 暂停上传

2.首先我们完成文件的切片

image.png

3.通过查询本地看是否有相应的数据(这里的做法是当本地记录的是已经上传100%时,就直接是重新上传而不是继续上传了)

4.根据文件名称也可完成文件是否存在,filter处理过滤

image.png

5.根据后端返回判断是否上传成功

image.png