上传功能看着简单，真要做好并不容易：文件拖进来就自动传、上传过程要有进度条、大文件要能切片断点续传、多文件要排队处理、传之前还要校验类型和大小，这些细节自己从零写相当费工夫。用成熟的上传组件，这些交互都是现成的，省下来的时间可以放在业务上。这次整理了 4 款开源免费、可商用的网页文件上传组件库，从普通上传到大文件续传都覆盖到了。
四款库各管什么场景
Dropzone 把任意元素变成拖拽上传区，文件拖进去就能传，自带缩略图预览、上传进度、成功失败状态和多文件队列，界面开箱即用也能自己改，还支持分块上传大文件。FilePond 的交互细节做得最精致，支持拖拽、粘贴、多文件、图片预览裁剪、文件类型校验和列表排序，插件按需加载，移动端适配也好。Resumable.js 主打可靠传输，把大文件切成小块逐个上传，网络中断或页面刷新后能从已传的部分接着传。Flow.js 也是分块上传，切片、并发、重试、暂停继续都有，还能显示实时上传速度。
上传里最容易出问题的地方
一是大文件。几百兆的文件直接一个请求发出去，中途断了就得从头再来，用户体验很差，正确做法是切片加断点续传，服务端负责把分片拼起来，这也是 Resumable.js 和 Flow.js 存在的意义。二是校验不能只放前端。前端校验类型和大小是为了一会儿就提示用户，但前端代码用户能绕过去，真正的限制必须服务端再做一遍，否则很容易被塞进不该传的文件。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版（部分含非压缩版）和需要的样式文件，正式项目引 min 版。四款库互相独立、不依赖任何框架，用 script 标签引入即可，但样式文件别忘记一起引，不然后组件显示会乱。选型上，普通上传用 Dropzone 或 FilePond，追求交互细致用 FilePond，要传大文件、断电断网后续传就用 Resumable.js 或 Flow.js。上传最终落到哪里、文件怎么存，还要后端配合。
上传是那种平时不起眼、一出问题就很显眼的功能。用户传了十分钟告诉你失败了，多半就是没做断点续传；传上去的图片打不开，往往是类型校验没做严。这几个问题提前用成熟组件避开，比上线后救火省事得多。四款库加起来两百多 K，按需引入不占什么体积，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容