实现上传文件(node 版本)

GitHub 地址:https://github.com/BadWaka/upload-file

参考文章:HTML上传文件的多种方式

实现上传文件(node 版本)

包括:

  • 同步(h5表单)
  • 异步(ajax)

Get Start

前置条件:需要安装 node v4 版本以上

  • clone 仓库代码
git clone https://github.com/BadWaka/upload-file.git
  • 进入代码目录,安装所需依赖
cd upload-file
npm i
  • 执行 node server.js,启动服务
node server.js

原理

服务端

服务端是使用 express 框架和库 multer 实现的文件上传功能

请求经过 multer 这个中间件,可以通过 req.files 或者 req.file 获得要上传的文件的信息,再通过 fs 模块写入到磁盘上

前端

同步原理

使用 h5 原生表单,form 配合 input[file]、input[submit],指定接口(action),很轻松的实现


异步原理

  • 监听 input[file] 元素的 onchange 事件,在选择文件完成后获取 fileList 文件列表对象


  • 通过 ajax 和 formData 构建请求,请求后端接口

    • 可以通过 xhr.onload.onprogress 来获取上传的进度百分比


Thanks!

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 68,507评论 12 116
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 123,027评论 15 534
  • 当然这里对佛教不做评判,因为自己不懂佛教,只是由于这段文字,引发了我对“欲望”的思考。 欲望 欲望(Desire)...
    七诺rex阅读 171评论 0 0
  • 做每一件事情都要进入禅的境界。忘我,无我,连呼吸都无法察觉,与事物合二为一,不是我在做事,我没有做事,是事物本身与...
    坚强的小海龟阅读 21评论 0 0
  • 1.针对手机淘宝APP(手淘),如果你是产品经理,需要为产品瘦身。请分别按顺序回答下面三个问题:1)你会考虑首先去...
    小公子阅读 5,016评论 1 9