Express 结合 multer 上传图片

最新推荐文章于 2024-04-09 18:06:58 发布
最新推荐文章于 2024-04-09 18:06:58 发布
阅读量336 收藏 1
点赞数
文章标签： nodejs express 图片上传 文件上传 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827418/article/details/115794686
版权

一、 Multer 模块介绍

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用 于上传文件。
它是写在 busboy 之上非常高效。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。
https://www.npmjs.com/package/multer

二、 Express 上传文件模块 multer 的使用

  1. 安装 multer npm install --save multer
  2. 引入配置 multer 模块 ：
var multer = require('multer') //配置 
var storage = multer.diskStorage({ 
	//文件保存路径 注意路径必须存在
	destination: function (req, file, cb) { 
		cb(null, 'public/upload/') 
		},
	//修改文件名称 
	filename: function (req, file, cb) { 
		var fileFormat = (file.originalname).split("."); 
		cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]); 
		} 
	})
var upload = multer({ 
	storage: storage 
})
  1. 使用 multer
router.post('/doAdd', upload.single("pic"), function (req, res) { 
	res.send({ 
		file: req.file,//返回文件名 
		body: req.body 
		}) 
	});
第一种使用方式：无法指定上传文件的后缀名

在这里插入图片描述

在这里插入图片描述

第二种：可以指定文件的后缀名

在这里插入图片描述

const express = require("express")
var multer  = require('multer')
const path = require('path')
// var upload = multer({ dest: 'static/upload' }) 
// 上传文件之前目录必须存在
var storage = multer.diskStorage({
    // 配置上传的文件保存的目录
    destination: function (req, file, cb) {
      cb(null, 'static/upload')
    },
    // 修改上传的文件的文件名
    filename: function (req, file, cb) {
        // 1.获取后缀名
        let extname = path.extname(file.originalname)

        // 2.根据时间戳生成文件名
      cb(null, Date.now()+ "." + extname)
    }
  })
var upload = multer({ storage: storage })
var router = express.Router()
router.get("/",(req, res)=> {
    res.send("导航列表")
})
router.get("/add",(req, res)=> {
    res.render("admin/nav/add.html")
})
router.post("/doAdd", upload.single("pic") ,(req, res)=> {
    // 获取表单传过来的数据
    var body = req.body;
    console.log(body)
    console.log(req.file)
    res.send({
        body: req.body,
        file: req.file
    })
})

router.get("/edit",(req, res)=> {
    res.send("修改导航")
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改导航")
})

module.exports = router

在这里插入图片描述
tool.js :

var multer = require('multer')
const path = require('path')

let tools = {
    multer() {
        // var upload = multer({ dest: 'static/upload' }) 
        // 上传文件之前目录必须存在
        var storage = multer.diskStorage({
            // 配置上传的文件保存的目录
            destination: function (req, file, cb) {
                cb(null, 'static/upload')
            },
            // 修改上传的文件的文件名
            filename: function (req, file, cb) {
                // 1.获取后缀名
                let extname = path.extname(file.originalname)

                // 2.根据时间戳生成文件名
                cb(null, Date.now() + "." + extname)
            }
        })
        var upload = multer({ storage: storage })
        return upload
    }
}


module.exports = tools

nav.js:

const express = require("express")
const tool = require("../../model/tool")

var router = express.Router()
router.get("/",(req, res)=> {
    res.send("导航列表")
})
router.get("/add",(req, res)=> {
    res.render("admin/nav/add.html")
})
router.post("/doAdd", tool.multer().single("pic") ,(req, res)=> {
    // 获取表单传过来的数据
    var body = req.body;
    console.log(body)
    console.log(req.file)
    res.send({
        body: req.body,
        file: req.file
    })
})
// var multer  = require('multer')
// const path = require('path')
// // var upload = multer({ dest: 'static/upload' }) 
// // 上传文件之前目录必须存在
// var storage = multer.diskStorage({
//     // 配置上传的文件保存的目录
//     destination: function (req, file, cb) {
//       cb(null, 'static/upload')
//     },
//     // 修改上传的文件的文件名
//     filename: function (req, file, cb) {
//         // 1.获取后缀名
//         let extname = path.extname(file.originalname)

//         // 2.根据时间戳生成文件名
//       cb(null, Date.now()+ "." + extname)
//     }
//   })
// var upload = multer({ storage: storage })


// router.post("/doAdd", upload.single("pic") ,(req, res)=> {
//     // 获取表单传过来的数据
//     var body = req.body;
//     console.log(body)
//     console.log(req.file)
//     res.send({
//         body: req.body,
//         file: req.file
//     })
// })

router.get("/edit",(req, res)=> {
    res.send("修改导航")
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改导航")
})

module.exports = router

三、 Express 按照日期生成上传文件目录

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

tool.js:

var multer = require('multer')
const path = require('path')
const sd = require('silly-datetime')
const mkdirp = require('mkdirp')

let tools = {
    multer() {
        // var upload = multer({ dest: 'static/upload' }) 
        // 上传文件之前目录必须存在
        var storage = multer.diskStorage({

            // 配置上传的文件保存的目录
            destination: async function (req, file, cb) {
                // 1.获取当前日期 20210417
                let day = sd.format(new Date(), 'YYYYMMDD')

                let dir = path.join('static/upload', day)
                // 2.按照日期生成图片存储目录
                await mkdirp(dir) // mkdirp()是一个异步方法

                cb(null, dir)
            },
            // 修改上传的文件的文件名
            filename: function (req, file, cb) {
                // 1.获取后缀名
                let extname = path.extname(file.originalname)

                // 2.根据时间戳生成文件名
                cb(null, Date.now() + "." + extname)
            }
        })
        var upload = multer({ storage: storage })
        return upload
    }
}


module.exports = tools

nav.js:

const express = require("express")
const tool = require("../../model/tool")

var router = express.Router()
router.get("/",(req, res)=> {
    res.send("导航列表")
})
router.get("/add",(req, res)=> {
    res.render("admin/nav/add.html")
})
router.post("/doAdd", tool.multer().single("pic") ,(req, res)=> {
    // 获取表单传过来的数据
    var body = req.body;
    console.log(body)
    console.log(req.file)
    res.send({
        body: req.body,
        file: req.file
    })
})
// var multer  = require('multer')
// const path = require('path')
// // var upload = multer({ dest: 'static/upload' }) 
// // 上传文件之前目录必须存在
// var storage = multer.diskStorage({
//     // 配置上传的文件保存的目录
//     destination: function (req, file, cb) {
//       cb(null, 'static/upload')
//     },
//     // 修改上传的文件的文件名
//     filename: function (req, file, cb) {
//         // 1.获取后缀名
//         let extname = path.extname(file.originalname)

//         // 2.根据时间戳生成文件名
//       cb(null, Date.now()+ "." + extname)
//     }
//   })
// var upload = multer({ storage: storage })


// router.post("/doAdd", upload.single("pic") ,(req, res)=> {
//     // 获取表单传过来的数据
//     var body = req.body;
//     console.log(body)
//     console.log(req.file)
//     res.send({
//         body: req.body,
//         file: req.file
//     })
// })

router.get("/edit",(req, res)=> {
    res.send("修改导航")
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改导航")
})

module.exports = router

四、实现多文件上传

在这里插入图片描述
在这里插入图片描述
add.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/admin/user/doAdd" method="POST" enctype="multipart/form-data">
        标题：<input type="text" name="title" id="title">
        <br>
        <br>
        图片1：<input type="file" name="pic1" id="pic1">
        <br>
        <br>
        图片2：<input type="file" name="pic2" id="pic2">
        <br>
        <br>
        描述：<textarea name="desc" id="desc" cols="30" rows="10"></textarea>
        <br>
        <br>
        <input type="submit" value="提交">
    </form>
    
</body>
</html>

user.js :

const express = require("express")
const tool = require('../../model/tool')


var router = express.Router()



router.get("/",(req, res)=> {
    res.send("用户列表")
})

router.get("/add",(req, res)=> {
    res.render("admin/user/add.html")
})

let cpUpload = tool.multer().fields([{ name: 'pic1', maxCount: 1 }, { name: 'pic2', maxCount: 1 }])

router.post("/doAdd", cpUpload, (req, res)=> {
    res.send({
        body: req.body,
        files: req.files
    })
})

router.post("/doEdit",(req, res)=> {
    res.send("执行修改用户")
})


router.get("/edit",(req, res)=> {
    res.send("修改用户")
})

module.exports = router

tool.js:

var multer = require('multer')
const path = require('path')
const sd = require('silly-datetime')
const mkdirp = require('mkdirp')

let tools = {
    multer() {
        // var upload = multer({ dest: 'static/upload' }) 
        // 上传文件之前目录必须存在
        var storage = multer.diskStorage({

            // 配置上传的文件保存的目录
            destination: async function (req, file, cb) {
                // 1.获取当前日期 20210417
                let day = sd.format(new Date(), 'YYYYMMDD')

                let dir = path.join('static/upload', day)
                // 2.按照日期生成图片存储目录
                await mkdirp(dir) // mkdirp()是一个异步方法

                cb(null, dir)
            },
            // 修改上传的文件的文件名
            filename: function (req, file, cb) {
                // 1.获取后缀名
                let extname = path.extname(file.originalname)

                // 2.根据时间戳生成文件名
                cb(null, Date.now() + "." + extname)
            }
        })
        var upload = multer({ storage: storage })
        return upload
    }
}

module.exports = tools

在这里插入图片描述

小小白学计算机
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
express文件上传中间件Multer详解
anda9128的博客
02-09 1385
express文件上传中间件Multer详解 　　转载自：https://www.cnblogs.com/chengdabelief/p/6580874.html Express默认并不处理HTTP请求体中的数据，对于普通请求体(JSON、二进制、字符串)数据，可以使用body-parser中间件。而文件上传(multipart/form-data请求)，可以基于请求流...
使用express+multer实现node中的图片上传功能
08-28
主要介绍了使用express+multer实现node中的图片上传功能,需要的朋友可以参考下
express 表单上传图片
08-06
后台服务器是express,通过表单上传图片
express里面的文件上传功能之multer使用总结
最新发布
峰会路转的博客
04-09 1179
你还可以使用 Multer 提供的limits选项来设置文件大小限制、文件数量限制等。limits: {fileSize: 1024 * 1024 * 5 // 限制文件大小为 5MB});通过以上步骤，你可以在 Express 应用中轻松实现文件上传功能。Multer 提供了灵活的配置选项，可以满足各种不同的文件上传需求。
express+multer实现上传图片
qq_45963949的博客
11-12 1271
其实很简单，就跟写平时的路由一样一样的 第一步 npm install multer 第二步 在路由文件夹里创建一个multer文件夹，里面再创建一个index.js文件(也可以不创，直接写在其他子路由里，我这里是为了项目结构更清晰) index.js里的内容： 1.先引入 const express = require('express') const router = express.Router() const multer = require('multer'); 2.指定文件储存的路径 v
express图片上传
weixin_43623017的博客
05-25 1104
安装multer npm install multer -D server端 const express = require('express') const multer = require('multer') const app = express() const port = 3000 const path = require('path') var storage = multer.diskStorage({ destination: function (req, file, cb) {
node的express框架中使用Multer实现文件上传功能
jieyucx的博客
08-02 1176
/ req.file 是 'myfile' 文件 的信息 // req.body 将具有文本域数据，如果存在的话 res . send('文件上传成功！');})这个路由中的upload.single(‘myfile’), 'myfile’是我们在前端form表单中定义的name值，对应的文件的file对象添加到了req。file属性中。upload.single的作用是处理前端传过来的name为’myfile’的单个文件。而req.body属性则包含了非文件的表单数据。req.file对象。
Express 结合multer上传文件、按照日期生成存储目录.zip
05-03
一、 Multer 模块介绍. 二、 Express 上传文件模块 multer 的使用 三、 Express 按照日期生成上传文件目录 四、 多文件上传
Nodejs进阶：基于express+multer的文件上传实例
10-21
本篇文章主要介绍了基于express+multer的文件上传实例，现在分享给大家，也给大家做个参考，感兴趣的小伙伴们可以参考一下。
Express系列之multer上传的使用
08-29
本篇文章主要介绍了Express系列之multer上传的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
express之multer文件上传
_fan的博客
01-30 438
安装 npm install multer --save 为了方便演示，本文内容涉及express的模板引擎art-template 使用 index.html模板，注意一定要写enctype="multipart/form-data"，和 input 标签的name属性， name是multer接收文件重要标识 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
express中间件multer的使用
weixin_47863547的博客
08-08 1033
multer 文件上传 1.安装 npm install --save-dev multer 2.引入multer模块 const express = require('express') //引入multer模块 const multer = require('multer') 3.使用 //文件上传 const multer = require('multer'); let storage = multer.diskStorage({ //设置文件存储目录 destinatio
Express文件表单解析中间件 Multer简介
qq_44254353的博客
12-26 602
前言 Express中最常使用的form解析中间件就是body-parser了,但是它明确表示不会支持multipart/form-data类型的表单. 所以在body-parser官方文档中提供了如下的几个支持multipart/form-data类型的中间件的链接,或者只支持multipart/form-data解析的中间件链接. 名称&amp;地址 周下载量 stars bu...
express使用multer时一点小细节
exxes的博客
03-01 974
前端:使用vue+el-upload传输图片文件到后端,使用FormData封装数据,这里我的接口没有用组件中的action,用了自定义的http-request,代码如下 changeAvatarUpload(params) { let file = params.file // file.name = 'userHead' console.log(file) const isJPG = (file.typ
express+multer实现layedit富文本编辑器图片上传 新增查看源码功能
YanGo的博客
06-04 252
express+multer实现layedit富文本编辑器图片上传 新增layedit查看源码功能 首先使用express创建一个项目server express server 然后初始化项目 //进入server目录 cd server //初始化项目 cnpm install 安装所需要的依赖库 //multer用来处理文件上传 cnpm install multer --save //express-art-template和art-template是html渲染模版引擎 cnpm
nodejs学习 multer
zhangkainumber的博客
05-27 1085
body-parser用来解析文字内容 对于上传文件则需要用到一个新的模块multer    在html中 enctype="mulipart/form-data"首先安装multer    npm install multer引入multer    multer=require("multer")使用server.use(multer({dest:"./上传文件夹的目录"}).any())   ...
express multer
08-20
Express是一个流行的Node.js框架，用于构建Web应用程序。Multer是一个Express中间件，用于处理HTTP请求中的文件上传操作。 使用Multer可以轻松处理表单中的文件上传。它提供了一些功能，例如限制文件类型、文件大小和保存文件等。 在使用Express和Multer时，你需要首先安装它们的npm包。可以通过以下命令安装： ``` npm install express multer ``` 然后，在你的Express应用程序中，导入这些模块并将其配置为中间件。下面是一个简单的示例： ```javascript const express = require('express'); const multer = require('multer'); // 创建Express应用程序 const app = express(); // 配置Multer中间件 const upload = multer({ dest: 'uploads/' }); // 定义文件上传路由 app.post('/upload', upload.single('file'), (req, res) => { // 处理上传的文件 console.log(req.file); // 上传的文件信息 res.send('File uploaded!'); }); // 启动服务器 app.listen(3000, () => { console.log('Server is listening on port 3000'); }); ``` 在上面的示例中，我们创建了一个Express应用程序，并将Multer配置为中间件。使用`upload.single`方法可以处理单个文件上传，其中`'file'`参数是表单字段的名称。 当客户端发送带有文件的POST请求到`/upload`路由时，中间件会将文件保存到指定的目录（在此示例中为`uploads/`），并将文件信息存储在`req.file`对象中。你可以根据需要进一步处理文件，例如将其移动到其他地方或将其保存到数据库中。 这只是一个简单的示例，你可以根据自己的需求进行更复杂的配置和处理。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值