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

一、安装multer

  1. npm install multer

　　

二、处理单个文件上传

  1. const express = require('express');
  2. const multer = require('multer');
  3. const path = require('path');
  4.  
  5. let app = express();
  6. app.listen(8888);
  7.  
  8. app.get('/', function (req, res) {
  9.     res.sendFile(path.join(__dirname, 'index.html'));
  10. });
  11.  
  12. //创建一个multer对象，dest用来设置上传文件存放的目录
  13. let upload = multer({dest: 'uploads/'});
  14. //single()方法是用来处理单个文件上传，注意参数的名字要与表单中的name值一致
  15. app.post('/upload', upload.single('img'), function (req, res) {
  16.     //body里面存放了表单的文本域信息
  17.     console.log(req.body);
  18.     //file存放了单个文件的信息
  19.     console.log(req.file);
  20.  
  21.     res.end('ok');
  22. });

index.html的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  8. <form action="http://localhost:8888/upload" method="post" enctype="multipart/form-data">
  9.     用户名：<input type="text" name="name"><br>
  10.     密码：<input type="password" name="pwd"><br>
  11.     图片：<input type="file" name="img"><br>
  12.     <input type="submit" value="提交">
  13. </form>
  14. </body>
  15. </html>

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

二、处理多个文件上传

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

  1. const express = require('express');
  2. const multer = require('multer');
  3. const path = require('path');
  4.  
  5. let app = express();
  6. app.listen(8888);
  7.  
  8. app.get('/', function (req, res) {
  9.     res.sendFile(path.join(__dirname, 'index.html'));
  10. });
  11.  
  12. let upload = multer({dest: 'uploads/'});
  13. //array()方法用于处理多个文件上传
  14. //参数一表示，文件上传表单name属性的值
  15. //参数二表示，允许上传文件个数
  16. app.post('/uploads', upload.array('imgs', 3), function (req, res) {
  17.     //files存放了多个文件的信息，是一个数组
  18.     console.log(req.files);
  19.     res.end('ok');
  20. });
  21.  
  22. //fields()方法也可以处理多个文件，参数是一个对象数组。
  23. //对象中用name指定文件上传表单name属性的值，maxCount指定允许上传文件个数
  24. app.post('/objects', upload.fields([
  25.     {name: "head", maxCount: 1},
  26.     {name: "info", maxCount: 3}
  27. ]), function (req, res) {
  28.     //files是一个对象，键就是我们上面设置的name的值，值就是文件数组
  29.     console.log(req.files);
  30.     res.end('ok');
  31. });

index.html的代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6. </head>
  7. <body>
  8. <form action="http://localhost:8888/uploads" method="post" enctype="multipart/form-data">
  9.     用户名：<input type="text" name="name"><br>
  10.     密码：<input type="password" name="pwd"><br>
  11.     图片1：<input type="file" name="imgs"><br>
  12.     图片2：<input type="file" name="imgs"><br>
  13.     图片3：<input type="file" name="imgs"><br>
  14.     <input type="submit" value="提交">
  15. </form>
  16.  
  17. <form action="http://localhost:8888/objects" method="post" enctype="multipart/form-data">
  18.     用户名：<input type="text" name="name"><br>
  19.     密码：<input type="password" name="pwd"><br>
  20.     头像：<input type="file" name="head"><br>
  21.     信息1：<input type="file" name="info"><br>
  22.     信息2：<input type="file" name="info"><br>
  23.     <input type="submit" value="提交">
  24. </form>
  25. </body>
  26. </html>

　　

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

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

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

  1. const express = require('express');
  2. const multer = require('multer');
  3. const path = require('path');
  4. const fs = require('fs');
  5.  
  6. let app = express();
  7. app.listen(8888);
  8.  
  9. app.get('/', function (req, res) {
  10.     res.sendFile(path.join(__dirname, 'index.html'));
  11. });
  12.  
  13. let upload = multer({
  14.     storage: multer.diskStorage({
  15.         //设置文件存储位置
  16.         destination: function (req, file, cb) {
  17.             let date = new Date();
  18.             let year = date.getFullYear();
  19.             let month = (date.getMonth() + 1).toString().padStart(2, '0');
  20.             let day = date.getDate();
  21.             let dir = "./uploads/" + year + month + day;
  22.  
  23.             //判断目录是否存在，没有则创建
  24.             if (!fs.existsSync(dir)) {
  25.                 fs.mkdirSync(dir, {recursive: true});
  26.             }
  27.  
  28.             //dir就是上传文件存放的目录
  29.             cb(null, dir);
  30.         },
  31.         //设置文件名称
  32.         filename: function (req, file, cb) {
  33.             let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
  34.             //fileName就是上传文件的文件名
  35.             cb(null, fileName);
  36.         }
  37.     })
  38. });
  39.  
  40. app.post('/uploads', upload.array('imgs', 3), function (req, res) {
  41.     console.log(req.files);
  42.     res.end('ok');
  43. });

　　

四、过滤上传文件

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

  1. const express = require('express');
  2. const multer = require('multer');
  3. const path = require('path');
  4. const fs = require('fs');
  5.  
  6. let app = express();
  7. app.listen(8888);
  8.  
  9. app.get('/', function (req, res) {
  10.     res.sendFile(path.join(__dirname, 'index.html'));
  11. });
  12.  
  13. let upload = multer({
  14.     //用于过滤文件的函数
  15.     fileFilter: function (req, file, cb) {
  16.         let ext = path.extname(file.originalname);
  17.         let extArr = ['.jpg', '.jpeg', '.gif', '.png'];
  18.         if (!extArr.includes(ext)) {
  19.             //拒绝这个文件
  20.             //cb(null, false);
  21.             //当然我们还可以发送一个错误
  22.             cb(new Error('扩展名不正确'));
  23.         }
  24.  
  25.         //接受这个文件
  26.         cb(null, true);
  27.     }
  28. });
  29.  
  30. app.post('/uploads', upload.array('imgs', 3), function (req, res) {
  31.     console.log(req.files);
  32.     res.end('ok');
  33. });
  34.  
  35. //捕获错误
  36. app.use(function (err, req, res, next) {
  37.     res.send(err.toString());
  38. });

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. 18.1 volatile的作用

    volatile的作用是作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值. 1.编译器的优化 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一 ...

  2. java 代码实现使用Druid 链接池获取数据库链接

    因为原先使用的c3p0链接池,时常出现:APPARENT DEADLOCK!!! Creating emergency threads for unassigned pending tasks,以及出 ...

  3. VUE 进行微信支付，解决 微信支付URL未注册

    使用history方式 比较坑吧就不吐槽了,说下实现方式 需要解决问题: 1.因为我的微信支付授权路由是:m.xxxx.com,this.$router.push('xxx')之后经常出现 [微信支付 ...

  4. 把java程序作为windows服务运行

    参考: https://www.jianshu.com/p/fc9e4ea61e13 https://blog.csdn.net/qq_28566071/article/details/8088250 ...

  5. keil5 MDK 链接报错 Error: L6410W 解决

    keil5 MDK 报错 Build target 'Project' linking... .\Output\Project.axf: Warning: L6310W: Unable to find ...

  6. crossdomain.xml配置不当的利用和解决办法

    00x1: 今天在无聊的日站中发现了一个flash小站,点进crossdomain.xml一看,震惊 本屌看到这个*就发觉事情不对 百度一下,这是一个老洞,配置不当能引起各种问题就算能远程加载恶意的s ...

  7. html 之 <meta> 标签之http-equiv

    语法规则: <meta http-equiv=“参数” content=“参数值” > 1.X-UA-Compatible 文档兼容模式的定义 <meta http-equiv=“X ...

  8. MyElipse10添加Git

    1.下载对应MyEclipse的egit,教程用的是22.2的 http://wiki.eclipse.org/EGit/FAQ#Where_can_I_find_older_releases_of_ ...

  9. centos 全局环境变量设置

    CentOS的环境变量配置文件体系是一个层级体系,这与其他多用户应用系统配置文件是类似的,有全局的,有用户的,有shell的,另外不同层级有时类似继承关系.下面以PATH变量为例. 1.修改/etc/ ...

  10. React开发笔记

    项目环境搭建 使用create-react-app CSS使用styled-components yarn add styled-components 引入reset.css样式 import { c ...