{"id":21333832,"url":"https://github.com/array-huang/chunked-uploading-demo","last_synced_at":"2025-03-16T01:22:11.123Z","repository":{"id":42094574,"uuid":"250556181","full_name":"Array-Huang/chunked-uploading-demo","owner":"Array-Huang","description":"这是一个分片上传的 DEMO ，包含前后端，前端基于 create-react-app ，后端使用 node.js 。","archived":false,"fork":false,"pushed_at":"2022-12-06T16:36:20.000Z","size":1141,"stargazers_count":2,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T14:12:02.441Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Array-Huang.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-27T14:29:43.000Z","updated_at":"2020-08-12T13:33:41.000Z","dependencies_parsed_at":"2023-01-24T04:45:38.793Z","dependency_job_id":null,"html_url":"https://github.com/Array-Huang/chunked-uploading-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fchunked-uploading-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fchunked-uploading-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fchunked-uploading-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Array-Huang%2Fchunked-uploading-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Array-Huang","download_url":"https://codeload.github.com/Array-Huang/chunked-uploading-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243811060,"owners_count":20351647,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T23:16:21.941Z","updated_at":"2025-03-16T01:22:11.103Z","avatar_url":"https://github.com/Array-Huang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 描述\n这是一个**分片上传**的 DEMO ，包含前后端，后端使用 node.js 。\n\n## 使用方法\n\n### 安装\n```\nnpm i\n```\n\n### 启动\n```\n// 用一个终端来打开前端部分\nnpm start\n// 用另一个终端来打开server\nnpm run server\n```\n\n### 使用\n1. 在浏览器里打开`http://localhost:3000`页面。\n2. 如果要测试**多终端上传**，则多开浏览器窗口。\n3. 上传文件。\n\n\n## 前端部分\n- **文件唯一标识**，每个文件都用 Web Worker 开个线程来计算文件内容的 hash ，这个 hash 就是文件的唯一标识。\n- **分片**：从上传框的 DOM 元素里拿到 File 对象，多次调用 File 对象的`slice([start [, end]])`方法，就可以把文件切成多个文件分片；为了后端能够合并文件分片，还需要把文件分片的序号告知后端。\n- **断点续传/秒传**：上传前先根据文件唯一标识向后端请求，查询文件的上传情况，如果文件已经上传完成的，那么就返回文件信息；如果文件是部分上传的，就返回已上传的分片的序号，前端这边就可以继续上传那些还没上传的分片。\n- **多终端上传**：支持多终端同时上传同一文件。\n\n## 后端部分\n- 接到前端上传前的请求后，在本地文件数据库(node-json-db)里以文件的 hash 来搜索，搜到的话就返回给前端；如果没有搜到的话，就根据请求中附带的参数，包括文件 hash、有多少个分片等等信息，在本地文件数据库建立一个初始的数据结构(map)。\n- 这个数据结构有一个内容是比较重要的，那就是所有分片的上传状态；前端可以根据这个信息来决定上传哪些分片。\n- 另外，如果有另外一台机器正在上传同一个文件，我们需要在正式上传某个文件分片时，前端先发请求修改该文件分片的上传状态为“上传中”，在这个过程中如果发现该文件分片的状态不是“未上传”，那就舍弃掉。\n- 等到所有文件分片上传完毕的时候，前端会发起合并文件的请求，后端就根据文件分片的顺序建立文件可读流(`fs.createReadStream()`)，然后通过管道输出到新文件的可写流上(`fs.createWriteStream()`)。\n\n## TODO\n- 多文件上传\n- 并发上传\n- 进度条\n- 暂停/恢复上传\n- 低版本浏览器兼容\n- 异常情况处理：某个后端接口报错，如`500`等\n- 异常情况处理：在多终端中，某终端在上传某个分片时异常退出，其它终端需要补上传该终端未上传完成的分片","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farray-huang%2Fchunked-uploading-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farray-huang%2Fchunked-uploading-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farray-huang%2Fchunked-uploading-demo/lists"}