multer中间件，可以很方便的结合express处理用户表单上传的文件。

一、安装multer

npm install multer

　　

二、处理单个文件上传

const express = require('express');

const multer = require('multer');

const path = require('path');

let app = express();

app.listen(8888);

app.get('/', function (req, res) {

    res.sendFile(path.join(__dirname, 'index.html'));

});

//创建一个multer对象，dest用来设置上传文件存放的目录

let upload = multer({dest: 'uploads/'});

//single()方法是用来处理单个文件上传，注意参数的名字要与表单中的name值一致

app.post('/upload', upload.single('img'), function (req, res) {

    //body里面存放了表单的文本域信息

    console.log(req.body);

    //file存放了单个文件的信息

    console.log(req.file);

    res.end('ok');

});

index.html的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单</title>

</head>

<body>

<form action="http://localhost:8888/upload" method="post" enctype="multipart/form-data">

    用户名：<input type="text" name="name"><br>

    密码：<input type="password" name="pwd"><br>

    图片：<input type="file" name="img"><br>

    <input type="submit" value="提交">

</form>

</body>

</html>

点击提交后，可以看到在upload目录下有一个文件生成了，这个文件就是我们上传的文件，不过好像扩展名没有了。

二、处理多个文件上传

处理多个文件上传，可以使用 array() 或 fields() 方法。

const express = require('express');

const multer = require('multer');

const path = require('path');

let app = express();

app.listen(8888);

app.get('/', function (req, res) {

    res.sendFile(path.join(__dirname, 'index.html'));

});

let upload = multer({dest: 'uploads/'});

//array()方法用于处理多个文件上传

//参数一表示，文件上传表单name属性的值

//参数二表示，允许上传文件个数

app.post('/uploads', upload.array('imgs', 3), function (req, res) {

    //files存放了多个文件的信息，是一个数组

    console.log(req.files);

    res.end('ok');

});

//fields()方法也可以处理多个文件，参数是一个对象数组。

//对象中用name指定文件上传表单name属性的值，maxCount指定允许上传文件个数

app.post('/objects', upload.fields([

    {name: "head", maxCount: 1},

    {name: "info", maxCount: 3}

]), function (req, res) {

    //files是一个对象，键就是我们上面设置的name的值，值就是文件数组

    console.log(req.files);

    res.end('ok');

});

index.html的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>表单</title>

</head>

<body>

<form action="http://localhost:8888/uploads" method="post" enctype="multipart/form-data">

    用户名：<input type="text" name="name"><br>

    密码：<input type="password" name="pwd"><br>

    图片1：<input type="file" name="imgs"><br>

    图片2：<input type="file" name="imgs"><br>

    图片3：<input type="file" name="imgs"><br>

    <input type="submit" value="提交">

</form>

<form action="http://localhost:8888/objects" method="post" enctype="multipart/form-data">

    用户名：<input type="text" name="name"><br>

    密码：<input type="password" name="pwd"><br>

    头像：<input type="file" name="head"><br>

    信息1：<input type="file" name="info"><br>

    信息2：<input type="file" name="info"><br>

    <input type="submit" value="提交">

</form>

</body>

</html>

　　

三、自定义文件存储路径和文件名

上面的代码我们通过配置 dest 来指定存放目录。不过如果上传文件过多，单一的存放在一个目录下肯定有问题，所以需要我们自定义。

还有文件上传后，都没有扩展名了，这显然也需要我们自定义。

const express = require('express');

const multer = require('multer');

const path = require('path');

const fs = require('fs');

let app = express();

app.listen(8888);

app.get('/', function (req, res) {

    res.sendFile(path.join(__dirname, 'index.html'));

});

let upload = multer({

    storage: multer.diskStorage({

        //设置文件存储位置

        destination: function (req, file, cb) {

            let date = new Date();

            let year = date.getFullYear();

            let month = (date.getMonth() + 1).toString().padStart(2, '0');

            let day = date.getDate();

            let dir = "./uploads/" + year + month + day;

            //判断目录是否存在，没有则创建

            if (!fs.existsSync(dir)) {

                fs.mkdirSync(dir, {recursive: true});

            }

            //dir就是上传文件存放的目录

            cb(null, dir);

        },

        //设置文件名称

        filename: function (req, file, cb) {

            let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);

            //fileName就是上传文件的文件名

            cb(null, fileName);

        }

    })

});

app.post('/uploads', upload.array('imgs', 3), function (req, res) {

    console.log(req.files);

    res.end('ok');

});

　　

四、过滤上传文件

有些时候我们希望用户上传的只是图片文件，其他文件不让上传。

const express = require('express');

const multer = require('multer');

const path = require('path');

const fs = require('fs');

let app = express();

app.listen(8888);

app.get('/', function (req, res) {

    res.sendFile(path.join(__dirname, 'index.html'));

});

let upload = multer({

    //用于过滤文件的函数

    fileFilter: function (req, file, cb) {

        let ext = path.extname(file.originalname);

        let extArr = ['.jpg', '.jpeg', '.gif', '.png'];

        if (!extArr.includes(ext)) {

            //拒绝这个文件

            //cb(null, false);

            //当然我们还可以发送一个错误

            cb(new Error('扩展名不正确'));

        }

        //接受这个文件

        cb(null, true);

    }

});

app.post('/uploads', upload.array('imgs', 3), function (req, res) {

    console.log(req.files);

    res.end('ok');

});

//捕获错误

app.use(function (err, req, res, next) {

    res.send(err.toString());

});

node.js中 express + multer 处理文件上传的更多相关文章

  1. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

  2. 使用Node.js的Express框架进行文件上传

    我们先创建一个Express项目,要使用文件上传的功能还需要下载multer模块. npm install --save multer 下面我们在public文件夹下创建upload.html,内容如 ...

  3. Nodejs进阶：基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  4. Node.js新手教程——怎样实现文件上传功能

    作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...

  5. node.js中express模块创建服务器和http模块客户端发请求

    首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文 ...

  6. 在 Node.js 中处理大 JSON 文件

    在 Node.js 中处理大 JSON 文件 场景描述 问题一: 假设现在有一个场景,有一个大的 JSON 文件,需要读取每一条数据经过处理之后输出到一个文件或生成报表数据,怎么能够流式的每次读取一条 ...

  7. Bootstrap fileinput.js，最好用的文件上传组件

    本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo   二.插件引入 <link ty ...

  8. zt对于C#中的FileUpload解决文件上传大小限制的问题设置

    对于C#中的FileUpload解决文件上传大小限制的问题设置 您可能没意识到,但对于可以使用该技术上载的文件的大小存在限制.默认情况下,使用 FileUpload 控件上载到服务器的文件最大为 4M ...

  9. 分享知识-快乐自己：SpringMvc中的单多文件上传及文件下载

    摘要:SpringMvc中的单多文件上传及文件下载:(以下是核心代码(拿过去直接能用)不谢) <!--设置文件上传需要的jar--> <dependency> <grou ...

随机推荐

  1. redis 4.x 安装哨兵模式 sentinel

    1.下载 http://download.redis.io/releases/redis-4.0.11.tar.gz 2.解压 tar zxvf redis-4.0.11.tar.gz 3.安装 cd ...

  2. The query below helps you to locate tables without a primary key:

    SELECT tables.table_schema, tables.table_name, tables.table_rows FROM information_schema.tables LEFT ...

  3. write(6)、write(10)和write(16)以及read(6)、read(10)和read(16)的区别与应用

    大家知道,我们读写硬盘的时候发送的命令为SCSI READ或SCSI WRITE.即SCSI读和SCSI写命令.但是READ和WRITE有很多种,这些命令的应用场合是什么呢? 最重要的一点就是,这是跟 ...

  4. shutil 拷贝 / 移动 / 压缩 / 解压缩

    # shutil_demo.py 高级文件操作(拷贝 / 移动 / 压缩 / 解压缩) import shutil def shutil_demo(): # 拷贝文件 shutil.copy2('fi ...

  5. getattribute

    属性访问拦截器  class Itcast(object): def __init__(self,subject1): self.subject1 = subject1 self.subject2 = ...

  6. C# 自定义类动态追加属性

    利用Dynamic,需要.net4.0以上的支持 var dg = rel.ResultDocuments.FirstOrDefault()["dg"].AsBsonArray.G ...

  7. element-ui的不稳定性

    伤脑筋的版本升级 element-ui升级到2.0版本了! element-ui作为比较成熟的广为人知的前端框架,原本满怀热情的去学习,也基于element-ui搭建出了一套系统,可是它居然升级了! ...

  8. solr6.4.1搜索引擎(3)增量同步mysql数据库

    尚未实现首次同步mysql数据库的,请参考我的另一篇文章http://www.cnblogs.com/zhuwenjoyce/p/6512378.html(solr6.4.1搜索引擎同步mysql数据 ...

  9. 大数据的乘法实现——C语言

    1大数据乘法的算法思路: 输入两个字符串,得到结果,例如:123456789*123456789: 思路:1)首先 123456789*1 = 9   18  27  36  45  54  63   ...

  10. 转的,具体 https://www.cnblogs.com/icyJ/p/FreeShare.html

    网络资源下载网址 屏幕录像.图像处理,汉化和破解版本很新.国内破解汉化:大眼仔旭 http://www.dayanzai.me/ 开发工具,系统,数据库 http://msdn.itellyou.cn ...