网站首页 > 技术文章 正文
前言
文件上传一个基础服务端功能,比如:上传一张用户头像。
由于我自己 node api 使用的不多,借这个“文件上传”功能,来了解 node 服务端如何接收客户端的文件,然后存储到服务器上,完成整个功能。
文件上传
先看下流程图:
通常会有两种简单的场景:
- 客户端上传图片,服务端解析后,保存在当前服务器,回告客户端,整个流程结束。
- 可能还会有其他服务器需要这个上传文件,这时就涉及两个服务端之间的上传通讯过程。
下面按照这两个场景,分步看下实际怎么处理:
解析客户端请求
必须要提前说的是,浏览器端通常需要通过 form 表单组件来触发上传文件弹框的 激活。上传图片的 ajax 还需要添加特定的请求头:multipart/form-data 。
这里使用 formidable 这个工具模块,来解析来自客户端 request 中的上传文件,毕竟我们自己写代码解析太麻烦了。
借助 formidable ,整个请求流的解析还是很方便的。通过 form.parse 就能帮我们拿到上传的资源文件 file 对象,然后我们可以进行下步“文件落地”的操作。
通过 fs 实现文件落地
这里简单说下 fs 如何保存 file ,当然如果你比较熟悉 node 的话,可以选择性的跳过。
因为服务器的资源处理会比较重要,上例中只是简单的示例如何保存上传资源。实际操作中,需要对上传文件的后缀、大小、以及定期控制文件夹文件数量等有个更为严格的处理。
以防止服务器被攻击等情况的发生。
重写 node 请求,发送给后端
一般情况,我们完成上述两个步骤,基本文件上传的整个流程结束了。但可能 node 服务端只是个中间层,真正的资源落地需要在业务后端存储,这时就需要把上面存在中间层的资源,再次发到后端服务。
这里用到了 form-data 模块,来模拟类似浏览器 form 的提交信息。
拿到在中间层存储的文件路径,通过 fs 转成 ReadStream 并构造成一个 formData。再通过 axios 等 http 服务工具发送给后端服务。
当然整个请求的 header 和 data 需要符合后端的接收标准(下图,举个例子):
总结
上述是一个较为完整的文件上传说明,希望对此类有问题的同学能有启发作用。
关于我
一位“前端工程师”,乐于实践,并分享前端开发经验。
如果有问题或者想法,欢迎各位评论留言,愿大家共同进步。
关注【前端雨爸】,查阅更多前端技术心得。
猜你喜欢
- 2024-11-25 超强 Vue+Electron 图床上传工具PicGo
- 2024-11-25 JAVA全栈CMS系统vue图片/视频上传组件,多图上传及删除功能11
- 2024-11-25 SpringCloud+vue实现图片裁剪缩放上传
- 2024-11-25 Node.js实现将文字与图片合成技巧
- 2024-11-25 Nodejs之MEAN栈开发(四)-- form验证及图片上传
- 2024-11-25 基于业务场景下的图片/文件上传方案总结
- 2024-11-25 几行代码实现上传接口,白嫖Github做为在线图床
- 2024-11-25 我带的实习生竟然把图片直接存到了服务器上!崩溃了
- 2024-11-25 Fabric.js 将本地图像上传到画布背景
- 2024-11-25 前端JS判断上传文件是否是图片
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 600℃几个Oracle空值处理函数 oracle处理null值的函数
- 592℃Oracle分析函数之Lag和Lead()使用
- 580℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 576℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 572℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 565℃【数据统计分析】详解Oracle分组函数之CUBE
- 551℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 546℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)