Skip to content

15926719006/react-upload-demo

Repository files navigation

启动项目

  1. npm install or yarn install
  2. npm run dev or yarn dev

需求分析

  1. 大文件切片上传
  2. 同时上传文件不超过5个
  3. 支持「全部上传」和单独文件「开始上传」或「失败重新上传」

完成度

  1. 不够完善
  2. 完成
  3. 完成

设计思路

总体分为「视图层-App.tsx」,「业务逻辑层-useUpload」,「基础实现类- upload-manager」,「协议层-test/test.ts(模拟接口)」

--视图层:只做视图渲染处理,如不同上传状态时按钮的文案展示等

--业务逻辑层:作为一个中间层处理数据和视图之间的关系,如有特殊业务逻辑在这里添加,每个页面的上传逻辑甚至接口不一定是一样的,在这里处理,这里这个hooks,在目前的需求看来我认为只需要维护「文件列表」这一个状态,所以我在File类型的基础上增加了一个FileExtra的类型,因为我的视图只需要状态,进度,文件名这三个信息

--基础实现类:定义上传的状态,这里只做基础的状态,方法定义,upload只会返回上传结果,后面有什么逻辑全部放在业务层去做

--协议层:这里我没有做上传进度的模拟实现,感觉这种方式不太好模拟,需要服务支持。。。不过模拟思路也可以通过全局的状态来实时更新进度

乱七八糟

  1. 关于UploadManager的实现,我在构建实例的时候,传入请求的方法,这种做法感觉不一定好,主要是为了避免有时不同业务的上传的接口有差异
  2. 关于大文件切片上传,暂停后断点重续没有实现
  3. 没有实现暂停的功能,因为现在写的很简单,请求是秒请求,可以在模拟的请求里加一个定时器延时,如果在一定时间内暂停,就中断,但是暂停后要考虑重续的实现
  4. 因为上传的结果目前写的是随机的,可能有的时候点击「重新开始」没反应,实际上就是一直随机失败了,我在上传时打了个console,可以在控制台看

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published