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. Mysql组复制之单主模式（一）

    环境 系统:CentOS release 6.9 (Final) Mysql:5.7 机器: S1 10.0.0.7 lemon S2 10.0.0.8 lemon2 S3 10.0.0.9 lemo ...

  2. 阅读 Device Driver Programmer Guide 笔记

    阅读 Device Driver Programmer Guide 笔记 xilinx驱动命名规则 以X开头 源文件命名规则 以x打头 底层头文件与高级头文件 重点来了,关于指针的使用 其中 XDev ...

  3. oracle中如何修改用户名和密码

    1.以Windows操作系统为例,打开命令提示符,输入命令sqlplus /nolog ,进入oracle控制台,并输入 conn /as sysdba;以DBA角色进入. 2.连接成功后,输入“se ...

  4. 【常用命令】Linux相关命令

    [[TOC]] iostat - 查看系统I/O状况 -k Display statistics in kilobytes per second -m Display statistics in me ...

  5. 20165312 实验一 Java开发环境的熟悉

    20165312 实验一 Java开发环境的熟悉 一.实验内容及步骤 (一)使用JDK编译.运行简单的Java程序 Ctrl+Shift+T打开终端 输入cd cxgg20165312/test进入目 ...

  6. TypeScript 模块系统

    https://www.cnblogs.com/niklai/p/5808789.html

  7. Inception-v3的设计思路小结

    一.网络更深.更宽带来的问题 参数太多,若训练数据集有限,容易过拟合: 网络越大计算复杂度越大,难以应用:(内存和计算资源) 网络越深,梯度越往后穿越容易消失,难以优化模型. 解决: 如何减少参数(且 ...

  8. LeetCode contest-95[876,877,👁878]

    876. Middle of the Linked List first submission # Definition for singly-linked list. # class ListNod ...

  9. 买二手iphone的建议

    手机到手后一定要在第一时间把“按键开关.指纹解锁.指南针.照相机.话筒.听筒.手电筒.定位.WiFi”都测一遍. 环境有无wifi:imei:×××××序列号:××××× 外观和零件:1外观,1是否粗 ...

  10. Mysql 8.0修改密码

    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码';