nodejs服务器如何接收前端传递的文件

之前发过用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-8
form.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拆分出去的,但是这两个玩意儿本来就一实现同一个功能的,研究的话干脆就全研究了。

原文发布于微信公众号 - nodejs全栈开发(geekclass)

原文发表时间:2019-05-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券