node 第十四天 基于express的第三方中间件multer node后端处理用户上传文件

  1. Multer 是一个 node.js 中间件,用于处理multipart/form-data 类型的表单数据,它主要用于上传文件。它是写在 busboy 之上的所以非常高效。
  2. 前面我们已经知道了怎样利用express提供的静态资源处理中间件express.static()处理用户请求静态资源文件(图片, js, css等) 接下来学习如何处理用户上传文件, 编写处理上传文件的接口 (以图片为例)
  3. 下面就直接上代码
js 复制代码
const http = require('http');
const fs = require('fs');
const path = require('path');
const express = require('express');
const multer = require('multer');

const app = express();
app.use(express.json());

//文件上传
//https://github.com/expressjs/multer
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    const uploadFile = req.params['upload_file'];
    const filename = path.join(__dirname, `./upload/${uploadFile}`);
    fs.existsSync(filename) || fs.mkdirSync(filename);
    cb(null, filename);
  },
  filename: (req, file, cb) => {
    console.log(file);
    let saveName = req.params['saveName'] || Date.now();
    let extName = path.extname(file.originalname || '.jpg');
    cb(null, saveName + '-' + Date.now() + extName);
  }
});
const upload = multer({ storage: storage });

//express中间件的洋葱模型
app.use('/', (req, res, next) => {
  console.log('根路由');
  next();
  console.log('根路由 洋葱穿透');
});

app.use('/user', (req, res, next) => {
  console.log('用户路由');
  next();
  console.log('用户路由 洋葱穿透');
});
//用户可以指定要保存在哪个文件夹(不存在则创建) 和 保存的文件名
app.use(
  '/user/:upload_file/:saveName',
  (req, res, next) => {
    console.log('上传路由');
    next();
    console.log('上传路由 洋葱穿透');
  },
  upload.array('file'),
  (req, res, next) => {
    console.log(req.headers['content-type'], req.body);
    res.send({ msg: 'upload success !' });
    next();
  }
);

const server = http.createServer(app);
server.listen(3010, () => {
  console.log('listening...');
});
  1. postmen测试一下就可以啦, 注意请求的数据类型应该是multipart/form-data
  2. 上面的代码还提到了express中间件的洋葱模型
    输出顺序是:
    根路由
    用户路由
    上传路由
    上传路由 洋葱穿透
    用户路由 洋葱穿透
    根路由 洋葱穿透

这是express中间件的重要机制, 逻辑上比较像dom事件的捕获与冒泡阶段

相关推荐
前端大白话11 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
嘻嘻嘻嘻嘻嘻ys13 分钟前
《Vue 3全栈架构实战:Vite工程化、Pinia状态管理与Nuxt 3深度解析》
前端·后端
前端大白话14 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村21 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg501725 分钟前
Vue回调函数中的this
前端·javascript·vue.js
前端太佬27 分钟前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb200437 分钟前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
爱编程的鱼38 分钟前
如何让 HTML 文件嵌入另一个 HTML 文件:详解与实践
前端·html
_092742 分钟前
Vue 2 与 Vue 3 的核心区别及 Vue 3 新特性详解
前端
David凉宸43 分钟前
一文带你使用Vue完成移动端(apk)项目
前端