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. 01python语言程序设计基础——初识python

    1.python的字符串中format函数用法   format 函数可以接受不限个参数,位置可以不按顺序. In [2]: "{} {}".format("hello& ...

  2. PCB行业研究

    PCB行业研究 PCB产业上下游 关于HDI电路板 主要用于手机行业,对电路板面积有严格要求. 啥时候铜材料上涨

  3. Windows程序设计_21_Win32文件操作

    没什么新的内容,自己的练习代码,供大家点评. /* Windows系统编程--实例 1)复制文件 */ #define UNICODE //#define _UNICODE #include < ...

  4. sxstrace启动.bat

    @echo offset dd=%date:~8,2%set mm=%date:~5,2%set yy=%date:~0,4%set Tss=%TIME:~6,2%set Tmm=%TIME:~3,2 ...

  5. Windows系统中监控文件复制操作的几种方式

    http://blog.sina.com.cn/s/blog_4596beaa0100lp4y.html 1. ICopyHook 作用: 监视文件夹和打印机移动,删除, 重命名, 复制操作. 可以得 ...

  6. LeetCode——300. Longest Increasing Subsequence

    一.题目链接:https://leetcode.com/problems/longest-increasing-subsequence/ 二.题目大意: 给定一个没有排序的数组,要求从该数组中找到一个 ...

  7. 报错：Exception in thread "main" com.typesafe.config.ConfigException$UnresolvedSubstitution

    报错现象: 报错原因: pom文件中的jar包太高,可以降低jar包的版本号. 报错解决: 我将2.11换成了2.10,即可解决. <dependency> <groupId> ...

  8. sweetalert弹窗的使用

    之前接触到layer弹出层,今天又发现了一个非常实用的弹出层插件,它的名字叫做sweetalert. 官网地址:http://t4t5.github.io/sweetalert/ npm下载方式:np ...

  9. 爬虫基础线程进程学习-Scrapy

    性能相关 学习参考:http://www.cnblogs.com/wupeiqi/articles/6229292.html 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时 ...

  10. cxf+spring+soap简单接口开发

    最近学了cxf框架开发webservice,简单搭了个接口,方便后续翻阅,本人才疏学浅,若有不足,请多多谅解! 一.服务端: 1.所用到的jar包: maven的pom.xml配置: <proj ...