之前发过用nodejs搭建静态服务器的文章,今天和大家探讨一下如何利用nodejs接收前端上传的文件。
首先我们用nodejs的原生http模块搭建一个服务器,并且利用data事件和end事件接收前端上传的数据,代码演示如下:
const http = require("http");const app = http.createServer();const fs= require("fs");app.on("request",(req,res)=>{ if(req.method=="POST"){ var data = []; req.on("data",(chunk)=>{ data.push(chunk) }) req.on("end",()=>{ var buffer = Buffer.concat(data); fs.writeFile("./a",buffer,(err)=>{ if(!err){ res.end("ok") } }) }) }})app.listen(3000,()=>{ console.log("ok");})
阅读源码,我们发现这段脚本将上传的文件信息,写入到了当前目录的a文件中。
看一下前端代码,简单的一个上传文件的表单:
<body> <form action="http://localhost:3000/" method="POST" enctype="multipart/form-data"> <input multiple type="file" name="a"> <input type="submit" value="提交"> form> <script> script>body>
点击上传后,服务端将接收到的所有信息写入到了a文件中,打开a文件,截图如下:
上面红色部分就是图片信息转换为utf-8字符串后的编码,但是我们要图片,不要乱码,怎么办呢?
我们需要将这部分乱码截取出来,再根据图片的格式写入到一个图片文件中就可以了,我们需要做的是,我们要提取图片的二进制信息,提取图片描述信息(大小、名称、格式),将图片输出到需要长久保存的位置,自己手动实现的话比较麻烦。
这部分逻辑已经有一些npm包帮咱们实现了,今天就介绍两个常用的。
首先看第一个npm包,也是我感觉最好用的,fromidable,我们集成formidable将上面服务器的代码升级为第二个版本,代码如下:
const http = require("http");const app = http.createServer();const formidable = require("formidable");const path = require("path");app.on("request",(req,res)=>{ if(req.method=="POST"){ var form = new formidable.IncomingForm(); form.keepExtensions = true; form.multiples = true; console.log(form.type); form.uploadDir =path.join(__dirname,"my"); form.parse(req,function(err,fields,files){ res.end(JSON.stringify({fields,files})) }) }})app.listen(3000,()=>{ console.log("ok");})
仔细阅读源码,我们发现formidable的使用非常简单,以上代码主要作用如下:
1、构造form对象
2、配置相关参数,比如长久保存文件的位置,上传文件大小限制,是否允许上传图片数组。
3、调用form对象的parse方法解析文件信息,文件信息解析完成后会挂载到req上,文本信息将挂载到fileds上,文件信息将挂载到files上面。
4、根据fileds和files信息实现后端逻辑
5、将文件长久保存的地址返回给前端
比原生实现文件上传简单了很多,而且可以根据需求配置不同的设置,formidable的常用配置如下:
new一个form实例var form = new formidable.IncomingForm()将请求信息编码设置为utf-8form.encoding = 'utf-8';设置文件的临时存储存储路径,如果不设置的话默认设置到 os.tmpdir()form.uploadDir = "/my/dir";nodejs会默认将文件信息保存在一个没有后缀的文件中,设置为true将保留后缀form.keepExtensions = false;Either 'multipart' or 'urlencoded' depending on the incoming request.form.type设置上传信息-文本信息(fields)的的最大限制,默认是20mb,超出后会触发form上的error事件form.maxFieldsSize = 20 * 1024 * 1024;设置上传信息-文件信息(file)的的最大限制,默认是200mb,超出后会触发form上的error事件form.maxFileSize = 200 * 1024 * 1024;设置上传字符串的最大长度值为1000;form.maxFields = 1000;如果需要对上传的文件进行校验,需要设置sha1和md5,默认不校验;form.hash = false;如果前端表单设置了multiples,这个值需要设置为true,后端接收的文件为一个数组;form.multiples = false;解析上传的数据,将文本字段和文件从req中提取出来,fields存储文本,files存储文件form.parse(req, function(err, fields, files) { // ...});
以上便是今天介绍的nodejs上传文件的第一个npm常用包formadable。
这个包也可以结合express使用,因为express是对原生http模块的封装,所以我们可以使用form.parse直接解析express路由中的req信息,从而得到前端传递的文件,或者结合express的中间件express-formidable,具体功能就不演示了,原理非常简单,就是将formidable封装成了一个express中间件而已,大家有兴趣可以去读一下文档。
接着看第二个常用的npm包,multer,这个插件是express的一个中间件,express1、2版本中本来是集成到express中的,express3之后就分离出来了,所以要使用multer必须会使用express,这也是为什么把multer放到后面来讲(小编真是用心良苦,今晚加鸡腿)。
首先我们打开multer的npm官网,先看他的自我介绍:
Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. It is written on top of busboy for maximum efficiency. NOTE: Multer will not process any form which is not multipart (multipart/form-data)
https://www.npmjs.com/package/multer
翻译成中文就是,multer只负责解析表单数据,也就是请求头中携带content-type:multipart/form-data信息的请求才会处理,否则请注意multer不会运行。(小编的英语水平如何?)
multer的使用方式和formidable的使用方式很不一样,使用步骤大致如下:
1、引入npm包multer,用一个变量来接受,假设变量为multer
2、multer为一个函数,这个函数调用后会返回一个对象,我们用upload来接受这个对象,这个对象上面有好多生成express中间件的方法。
3、用upload这个生成中间件,放在相应位置去调用。
演示代码如下:
var express = require('express');var multer = require('multer');// 生成一个对象,凡是用这个对象生成的中间件,文件都会保存到uploads文件中var upload = multer({ dest: 'uploads/' })// 生成中间件,只能处理avatar的文件,文件的name只能是avatar,不是的话会报错var dealavatar = upload.single('avatar');var app = express()// 调用中间件app.post('/', dealavatar, function (req, res, next) { // req.file is the `avatar` file // req.body will hold the text fields, if there were any res.send({ fileds:req.body, files:req.file })})app.listen(3000,()=>{ console.log("ok");})
仔细阅读源码和注释,我们发现,multer中间件的配置分为两步:
1、第一步先调用multer函数传递一些参数,生成一个中间件生成对象
2、对象在调用特定方法传入特定参数,最终生成定制化的中间件。
那这样的话,我们想要熟练使用multer的话就需要知道
1、multer函数调用时需要传递哪些参数。
2、中间件生成对象有哪些方法可以调用,并且需要传递哪些参数。
multer不同于formidbale的地方在于multer将所有接收到的信息都挂载到了req.body和req.file上面。
下面我们就按照是上面提到的两个问题,梳理一下multer的文档,首先看第一个问题,multer需要传递哪些参数:
1、dest or storage 在哪里存储文件,dest比较直接,sotrage是存储引擎,我们可以灵活的配置存储引擎将文件进行保存 一般情况下,使用dest即可,像这样: var upload = multer({ dest: 'uploads/' })
2、fileFilter 设置一个函数来控制什么文件可以上传以及什么文件应该跳过,这个函数应该看起来像这样:
function fileFilter (req, file, cb) { // 这个函数应该调用 `cb` 用boolean值来 // 指示是否应接受该文件 // 拒绝这个文件,使用`false`,像这样: cb(null, false) // 接受这个文件,使用`true`,像这样: cb(null, true) // 如果有问题,你可以总是这样发送一个错误: cb(new Error('I don\'t have a clue!'))}
3、limits 限制上传的数据,是一个对象有如下可选项可供使用:
以上便是multer的参数,接下来看一下multer生成的中间件生成对象有哪些方法:
1、 .single(fieldname)
接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file。
2 、.array(fieldname[, maxCount])
接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files。
3、 .fields(fields)
接受指定 fields 的混合文件。这些文件的信息保存在 req.files。fields 应该是一个对象数组,应该具有 name 和可选的 maxCount 属性。
Example:[{ name: 'avatar', maxCount: 1 },{ name: 'gallery', maxCount: 8 }]
4、.none()
只接受文本域。如果任何文件上传到这个模式,将发生 "LIMIT_UNEXPECTED_FILE" 错误。这和 upload.fields([]) 的效果一样。
5、.any()
接受一切上传的文件。文件数组将保存在 req.files。
当然了使用multer我们一样要注意:永远不要将 multer 作为全局中间件使用,因为恶意用户可以上传文件到一个你没有预料到的路由,应该只在你需要处理上传文件的路由上使用。
以上便是multer的使用了,multer还有很多其他使用方式这里没有全部展示出来,毕竟篇幅有限,看文章读到这里的一定是真爱无疑了,小编一开始考虑将multer拆分出去的,但是这两个玩意儿本来就一实现同一个功能的,研究的话干脆就全研究了。
持续不断的提供优质干货、心得、坚持做通俗易懂的技术订阅号。