NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • Express

    • Express 通过 Http 下载文件
    • Express中使用间件Multer保存图片文件(示例)
    • Express结合中间件Multer保存上传文件或文件夹
      • 安装 multer 中间件
      • 封装 multer 中间件
      • 使用 multer 中间件
      • 错误处理机制
      • 使用案例
      • 其他示例
      • 相关资料
    • Express解决Vue打包部署刷新出现404问题
    • Node 中 Express 检查端口是否被占用(完美方案)
    • Nodejs 中使用 express 报 413 payload too large
    • 使用 express-generator 脚手架快速搭建 express 项目
  • Koa2

  • MongoDB

  • MySql

  • NodeJs

  • Oracle

  • Rust

  • Python

  • 后端开发
  • Express
NoteZ
2021-04-09
目录

Express结合中间件Multer保存上传文件或文件夹

multer 是 express 官方推荐的文件上传中间件,它是在 busboy 的基础上开发的。目前 multer 的最新版本为:~1.1.0。本文所有代码段均使用此版本。

# 安装 multer 中间件

npm i multer --save
1

# 封装 multer 中间件

let  multer=require('multer');
let storage = multer.diskStorage({
  //设置上传后文件路径,uploads文件夹会自动创建。
  destination: function (req, file, cb) {
        cb(null, './public/uploads')
    }, 
  //给上传文件重命名,获取添加后缀名
  filename: function (req, file, cb) {
      let fileFormat = (file.originalname).split(".");
      cb(null, file.fieldname + '-' + Date.now() + "." + fileFormat[fileFormat.length - 1]);
  }
 });  
//添加配置文件到muler对象。
let upload = multer({
    storage: storage
});
    
//如需其他设置,请参考multer的limits,使用方法如下。
//let upload = multer({
//    storage: storage,
//    limits:{}
// });
  
 //导出对象
module.exports = upload;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 使用 multer 中间件

const express = require('express');
const fs = require('fs');
const path = require('path');
const router = express.Router();
const muilter = require('./multerUtil');
//multer有single()中的名称必须是表单上传字段的name名称。
const upload = muilter.single('file');       	   
// 上传文件
router.post('/add', upload, (req, res, next) => {
    if (err) {
      return  console.log(err);
    } 
    //文件信息在req.file或者req.files中显示。
    console.log(req);
});
module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 错误处理机制

当遇到一个错误,multer 将会把错误发送给 express。你可以使用一个比较好的错误展示页 (express标准方式)。 如果你想捕捉 multer 发出的错误,你可以自己调用中间件程序。如果你想捕捉 Multe 错误,你可以使用 multer 对象下的 MulterError 类 (即 err instanceof multer.MulterError)。

var multer = require('multer')
var upload = multer().single('avatar')
app.post('/profile', function (req, res) {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      // 发生错误
    } else if (err) {
      // 发生错误
    }
    // 一切都好
  })
})
1
2
3
4
5
6
7
8
9
10
11
12

# 使用案例

前端通过 axios 将文件信息传送到服务端

handleAddFile() {
  this.file=[{
    lastModified: 1618279848617,
    lastModifiedDate: Tue Apr 13 2021 10:10:48 GMT+0800 (中国标准时间) {},
    name: "chunk-ee64b042.517eefa7.css",
    size: 7656,
    state: true,
    type: "text/css",
    webkitRelativePath: "dist/css/chunk-ee64b042.517eefa7.css"
  }]
  this.file.forEach((item, i) => {
    let formData = new FormData();
    formData.append("file", item, item.name);
    this.$axios.post("/swd/fileEdit/add", formData, {
        headers: {
          "www-name": this.www, //上传的文件根目录名称
          webkitRelativePath: item.webkitRelativePath, //文件路径名
        },
      })
      .then((res) => {
        if (res.data.code === 200) {
          console.log("文件上传成功!");
        }
      });
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

服务端接收前端传过来的文件信息

const express = require('express');
const fs = require('fs');
const path = require('path');
const router = express.Router();
const multer = require('multer');
const writeFileRecursive = function (path, buffer, callback) {
    let lastPath = path.substring(0, path.lastIndexOf("/"));
    fs.mkdir(lastPath, { recursive: true }, (err) => {
        if (err) return callback(err);
        fs.writeFile(path, buffer, function (err) {
            if (err) return callback(err);
            return callback(null);
        });
    });
}
router.post('/add', multer().single('file'), (req, res, next) => {
    let wwwName = req.get('www-name'); //文件存储的目录名称
    let relativePath = req.get('webkitRelativePath'); //文件或文件夹路径
    relativePath = relativePath ? './www/' + wwwName + '/' + relativePath.slice(relativePath.indexOf('/'), relativePath.length) : './www/' + wwwName + '/' + req.file.originalname
 
    /****** 方法一:直接写入 ******/
    let fileData = req.file.buffer.toString(); 
    writeFileRecursive(relativePath, fileData, (err) => {
        if (err) {
            res.json({ code: 500, message: req.file.originalname + "文件写入失败!" });
            console.error(err)
        } else {
            res.json({ code: 200, message: req.file.originalname + "文件写入成功!" });
            console.log(req.file.originalname + "文件写入成功!")
        };
    });
    
    /****** 方法二:使用流写入 ******/
    body.filePath = path.join(__dirname, `../${basePath}/${body.path}`); 
    // let p2 = fse.write(body.filePath, files) 
    let fileStream = fse.createWriteStream(body.filePath);
    fileStream.write(req.file.buffer);
    fileStream.end() 
    fileStream.on('error', function (err) {
      //console.log("error",err); 
    });
    fileStream.on('finish', function (res) {
      console.log("finish");
    });
    
});
 
module.exports = router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 其他示例

// 接收ico的图片
let icoPath = path.join(__dirname, `../../assets/navicon`)
fs.ensureDirSync(icoPath)
let multerIcon = multer({
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, icoPath);
    },
    filename: function (req, file, cb) {
      let changedName = (new Date().getTime()) + '-' + file.originalname;
      cb(null, changedName);
    }
  })
});
router.post('/icon', multerIcon.single('file'), (req, res, next) => {  
  res.json({
    code: 200,
    url:  "/navicon/" + req.file.filename,
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 相关资料

multer的官方地址:https://github.com/expressjs/multer (opens new window)

#Express
上次更新: 2024/01/30, 00:35:17
Express中使用间件Multer保存图片文件(示例)
Express解决Vue打包部署刷新出现404问题

← Express中使用间件Multer保存图片文件(示例) Express解决Vue打包部署刷新出现404问题→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式