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. .Net Core 项目在Windows服务中托管【转载】

    本文以创建的WebAPI项目为例子进行讲解(本人使用VS Code创建的项目) 1.使用VS Code创建WebAPI项目(项目名称自定义) 2.在创建的项目csproj项目文件中,确认是否存在运行时 ...

  2. MVC 中Scripts.Render、Styles.Render

    在ASP.NET MVC项目中,可以在视图中利用Scripts.Render.Styles.Render统一加载js.css文件,需要利用BundleConfig类来Add 各种Bundle,例如:b ...

  3. Scrapy学习篇（九）之文件与图片下载

    Media Pipeline Scrapy为下载item中包含的文件(比如在爬取到产品时,同时也想保存对应的图片)提供了一个可重用的 item pipelines . 这些pipeline有些共同的方 ...

  4. ss客户端以及tcp,udp,dns代理ss-tproxy本地安装版--centos7.3 x64以上(7.3-7.6x64测试通过)

    因为下载的文件,从cn下载很慢,或者下不动,所以我弄了一个本地安装版 本地安装的文件,我是从网上单独下载了,这里就不提供了. 记得在最后设置允许访问的局域网IP段 ## iptables 配置ipta ...

  5. 《女神异闻录 5》的 UI 设计

    转自:https://www.zhihu.com/question/50995871?sort=created <女神异闻录5>是近两年最为火热的JRPG游戏之一,它的出色不仅在于剧情暗讽 ...

  6. Node安装及自定义config

    下载Node.js , Windows下安装一键到底, 没有什么说的. 主要是默认无法流畅使用, 包括流畅下载, 全局缓存之类. 如下是进一步设置, 包括: - 设置淘宝镜像. - 增加Yarn(np ...

  7. JAVA使用log4j（另SSM框架中使用log4j）

    1.引入jar包 log4j-1.2.13.jar 2.src下建立配置文件:log4j.properties #不+All,只写后一种LOG log4j.rootLogger =ALL,system ...

  8. Oracle导出表数据与导入表数据dmp，以及导入导出时候常见错误

    使用DOS 操作界面导出表数据,导入表数据(需要在数据库所在的服务器上边执行) exp UserName/Password@192.168.0.141/orcl   file=d:\xtables.d ...

  9. 创建列表明细应用1－使用fragment

    笔记自<Android编程权威指南第二版> 第七章,创建一个列表明细应用 fragment是一种控制器对象,activity可委派它完成一些任务,这些任务通常就是管理用户界面.(管理用户界 ...

  10. leetcode238

    public class Solution { public int[] ProductExceptSelf(int[] nums) { int[] result = new int[nums.Len ...