# 需求描述 如果是后台管理所需的文件上传功能,就不考虑前端兼容性。但是后端能保证上传功能无问题么? # 方案调研 ## 前端上传 在 GitHub 中用关键字 `upload` 搜索,并筛选编程语言为 `JavaScript`,按 Star 数排名,第一个是 [pqina/filepond](https://github.com/pqina/filepond),紧接着的几个,要么已经归档了,要么是专用于 Angular 的,还有一个 Plupload 很多年前用过,但是没有好感。再之后的 [23/resumable.js](https://github.com/23/resumable.js) 看着挺顺眼,可以考察考察。 ## 后端上传 ### Node.js 生态 查看 filepond 这个库的 README,发现列出的配套的 Backend 没有 Node.js。 接着往后翻 README,在比较靠后的位置,有一篇 [Using FilePond with NodeJS](https://www.infoworld.com/article/3627248/how-to-use-filepond-with-nodejs.html),看来还是有 Node.js 的解决方案的。大致看了一下这篇文章,后端用的是 Express.js 作为底层框架,用 [node-formidable / formidable](https://github.com/node-formidable/formidable) 这个库实现接收上传文件的功能。 又看了看 formidable 这个库,17 年 1 月发布的最后一次 release?21 年和 18 年又发布过 3 次,但在 Releases 界面默认是折叠状态,搞不懂是为啥。 然后用 `node.js file upload` 作为关键字进行 Google,第一个链接是 [express-fileupload](https://github.com/richardgirges/express-fileupload),先记下来。 第二个链接是一篇 2020 年 2 月写的文章 [Handling File Uploads in Node.js with Express and Multer](https://stackabuse.com/handling-file-uploads-in-node-js-with-expres-and-multer/),里面提到了 [Multer](https://github.com/expressjs/multer)、Formidable、[Multiparty](https://github.com/pillarjs/multiparty) 这三个库是主流的 Node.js 上传库。Formidable 前面提到过,17 年之后就没更新了,另外俩也没好太多,Multiparty 前面几年诈尸式更新过几次,21 年就没动静了,Multer 好一点点,平均每年更新两三个版本的节奏。 如果要从这三个里面选的话,那就选 Multer 吧,至少比另外两个活跃,虽说也活跃不到哪里去。 另外 `node.js file upload` 这组关键字可以继续挖掘挖掘,目前只看了搜索结果的前两条。 ### 其他语言 又想起老徐之前说过的 [seaweedfs](https://github.com/chrislusf/seaweedfs),去看了看这个项目,看到项目的标签里有 [object-storage](https://github.com/topics/object-storage) 和 [blob-storage](https://github.com/topics/blob-storage),回头可以筛选一下这两个标签里的项目,看看有哪些比较好的项目能用上。 # 调研心得 文件上传分为前端部分和后端部分,搜索时可以缩小至两部分各自的范围,提高搜索结果的质量。 模板搜索网站包括 Google、GitHub、掘金、思否等国内外主流搜索引擎/网站。 搜索关键字也要不断扩充,比如前端部分的文件上传,底层是把 `form` 标签的 `enctype` 字段设置为 `multipart/form-data`,同时要用 `post` 方法才行,你看,这就是 `upload` 之外的又一个关键字。 # 结果汇总 ## 关键字列表 - upload - multipart/form-data - file server - node.js - object-storage - blob-storage ## 搜索网站 - Google - GitHub - Stack Overflow - 掘金 - 思否 ## 前端项目 - [uppy](https://github.com/transloadit/uppy):GitHub 上 JavaScript 语言分类排行第一的上传库。 - [pqina/filepond](https://github.com/pqina/filepond) - [23/resumable.js](https://github.com/23/resumable.js) ## 后端项目 - [Multiparty](https://github.com/pillarjs/multiparty) - [Multer](https://github.com/expressjs/multer) - [node-formidable / formidable](https://github.com/node-formidable/formidable) - [seaweedfs](https://github.com/chrislusf/seaweedfs) ## 相关文章 - [Using FilePond with NodeJS](https://www.infoworld.com/article/3627248/how-to-use-filepond-with-nodejs.html) - [Handling File Uploads in Node.js with Express and Multer](https://stackabuse.com/handling-file-uploads-in-node-js-with-expres-and-multer/) - [Nodejs support for uppy server #86](https://github.com/transloadit/uppy-server/issues/86)
Activity
[-]文件上传[/-][+]JS/JavaScript/Node.js 前端/后端文件上传[/+]