【node进阶】Express+Multer+Postman模拟文件上传功能

这篇具有很好参考价值的文章主要介绍了【node进阶】Express+Multer+Postman模拟文件上传功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力
✨ 个人主页:前端小白在前进的主页
🔥 系列专栏 : node.js学习专栏
⭐️ 个人社区 : 个人交流社区
🍀 学习格言: ☀️ 打不倒你的会使你更强!☀️
💯 刷题网站:这段时间有许多的小伙伴在问有没有什么好的刷题网站,博主在这里给大家推荐一款刷题网站:👉点击访问牛客网👈牛客网支持多种编程语言的学习,各大互联网大厂面试真题,从基础到拔高,快来体验一下吧!


express postman binary,node.js入门到精通,express,postman,中间件,node.js


🔥前言

在我们开发中,如果想上传文件,或者做个人中心的头像的时候不会再向我们之前那样仅仅发送一个post请求了,会指定相应的配置,以及需要搭配一个中间件Multer,接下来将详细展开!

Multer中间件

Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。
注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据

文件上传不同于我们传给后端普通的键值对,一般情况下我们所传的类型是x-www-form-urlencoded,但是官方规定文件上传的类型是multipart/form-data,我们如果自己去处理multipart/form-data类型的数据时,非常的吃力,于是借助于Multer中间件很好的解决了文件上传的问题。


安装Multer

npm install --save multer

基本使用方法

const express = require('express')
const multer  = require('multer')
const upload = multer({ dest: 'uploads/' })

const app = express()

app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file 是 `avatar` 文件的信息
  // req.body 将具有文本域数据,如果存在的话
})

app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files 是 `photos` 文件数组的信息
  // req.body 将具有文本域数据,如果存在的话
})

常用API解析

multer(opts)

Multer 接受一个 options 对象,其中最基本的是 dest 属性,这将告诉 Multer 将上传文件保存在哪。如果你省略 options 对象,这些文件将保存在内存中,永远不会写入磁盘

为了避免命名冲突,Multer 会修改上传的文件名。这个重命名功能可以根据您的需要定制。

以下是可以传递给 Multer 的选项:

描述
dest or storage 在哪里存储文件
fileFilter 文件过滤器,控制哪些文件可以被接受
limits 限制上传的数据
preservePath 保存包含文件名的完整文件路径

通常,一般的网页应用,只需要设置 dest 属性,像这样:

const upload = multer({ dest: 'uploads/' })

如果你想在上传时进行更多的控制,你可以使用 storage 选项替代 dest。Multer 具有 DiskStorage 和 MemoryStorage 两个存储引擎;另外还可以从第三方获得更多可用的引擎。

.single(fieldname)

接受一个以 fieldname 命名的文件。这个文件的信息保存在 req.file


.array(fieldname[, maxCount])

接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。这些文件的信息保存在 req.files


storage

在这里就先给大家讲述一个存储引擎(磁盘存储引擎 (DiskStorage)),另外一个大家可以去github官网自行学习,不要问我为什么,因为在这里只用了第一种(哈哈哈哈)

磁盘存储引擎可以让你控制文件的存储

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/tmp/my-uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

const upload = multer({ storage: storage })

有两个选项可用,destinationfilename。他们都是用来确定文件存储位置的函数

destination 是用来确定上传的文件应该存储在哪个文件夹中。也可以提供一个 string (例如 ‘/tmp/uploads’)。如果没有设置 destination,则使用操作系统默认的临时文件夹

注意: 如果你提供的 destination 是一个函数,你需要负责创建文件夹当提供一个字符串,multer 将确保这个文件夹是你创建的

filename 用于确定文件夹中的文件名的确定。 如果没有设置 filename,每个文件将设置为一个随机文件名,并且是没有扩展名的。

注意: Multer 不会为你添加任何扩展名,你的程序应该返回一个完整的文件名

每个函数都传递了请求对象 (req) 和一些关于这个文件的信息 (file),有助于你的决定。

注意 : req.body 可能还没有完全填充,这取决于向客户端发送字段和文件到服务器的顺序。

警告: 确保你总是处理了用户的文件上传。 永远不要将 multer 作为全局中间件使用,因为恶意用户可以上传文件到一个你没有预料到的路由,应该只在你需要处理上传文件的路由上使用。

这里是将官网中的话迁移了过来(Multer的官方解释链接),因为我觉得官网讲的已经通俗易懂了,没必要再去白话文化了,在这里已经把我们要用的multer主要的部分讲解了,接下来将进行文件上传功能


文件上传功能实现

demo目录架构

express postman binary,node.js入门到精通,express,postman,中间件,node.js


入口文件(app.js)

const express = require('express')
const app = express()
const uploadRouter = require('./index')
//想要在前端页面中访问到图片,去挂载静态资源
app.use(express.static('./public'))
//给路由挂载一个前缀
app.use('/api',uploadRouter)
app.listen(8080,()=>{
    console.log('8080端口已启动...');
})  

路由文件

const express = require('express')
//引入path模块的目的在于获取文件后缀名
const path = require('path')
const multer = require('multer')
const router = express.Router()
//进行自定义储存,并且将后端返回的文件加上后缀名后储存到文件夹中
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
      //在这里第二个参数传递了我们指定创建的储存文件的文件夹
      cb(null, 'public/uploads')
    },
    filename: function (req, file, cb) {
        //path模块获取文件后缀
        let ext = path.extname(file.originalname)
        //根据时间戳生成文件名字
        cb(null,Date.now() + ext)
    }
  })
  //在这里告诉Multer文件保存到了指定位置
  const upload = multer({ storage: storage })
router.post('/upload',upload.single('avater'),(req,res)=>{
	console.log(req.file)
	//将文件拼接成url地址,通过浏览器进行访问文件
    res.send({
        msg: '图片上传成功',
        url : `http://localhost:8080/uploads/${req.file.filename}`
    })
})

module.exports = router

我们在这里打印了req.file,具体解析如下图:
express postman binary,node.js入门到精通,express,postman,中间件,node.js


Postman测试

express postman binary,node.js入门到精通,express,postman,中间件,node.js


最终实现效果

express postman binary,node.js入门到精通,express,postman,中间件,node.js


补充

本篇文章中并没有给大家结合html来给大家做一个前端的演示,但是实现的原理是一样的,前端通过form表单或者FormData发送请求。
如果你是form表单直接提交,不要忘记在form添加属性enctype="multipart/form-data",
如果你是通过FormData发送请求,不要忘记进行一些配置(这里的代码只是为了告诉你怎么去做,不要直接cv,要不然没有效果):

const formdata = new FormData()
formdata.append('avater', avater.files[0])
const config = {
    headers: {
        "Content-Type":"multipart/form-data"
    }
}
router.post('/api/upload', formdata, config).then(res => {
    this.imgpath = 'http://localhost:8080' + res.data
})    

express postman binary,node.js入门到精通,express,postman,中间件,node.js文章来源地址https://www.toymoban.com/news/detail-785608.html

到了这里,关于【node进阶】Express+Multer+Postman模拟文件上传功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Postman 模拟 POST方式 上传文件

    1、设置请求Headers 1)新建一个 POST请求; 2)填写需要调用接口的URL路径; 3)因为是上传文件,所以需要将请求Header 中的 Content-Type 设置为 multipart/form-data !!! 2、设置Body 1)将 Body类型 选择为 form-data ; 2)如果有 文本参数 ,KEY 类型选择为 Text (默认是 Text); 3)如果

    2024年04月13日
    浏览(38)
  • 【node进阶】浅析Koa框架---ejs模板|文件上传|操作mongoDB

    ✅ 作者简介:一名普通本科大三的学生,致力于提高前端开发能力 ✨ 个人主页:前端小白在前进的主页 🔥 系列专栏 : node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 🍀 学习格言: ☀️ 打不倒你的会使你更强!☀️ 💯 刷题网站:这段时间有许多的小伙伴在问有没有什么

    2024年01月25日
    浏览(50)
  • Node + Express 后台开发 —— 上传、下载和发布

    前面我们已经完成了数据库的 增删改查 ,在弄一个 上传 图片、 下载 csv,一个最简单的后台开发就已完成,最后 部署 即可。 需求 需求 :做一个 个人简介 的表单提交,有 昵称 、 简介 和 头像 。后端能接收数据并保存到数据库。 接收不到数据 用 amis-editor (amis 低代码编

    2024年02月03日
    浏览(48)
  • Node.js: express + MySQL + Vue实现图片上传

            前段时间用Node.js: express + MySQL + Vue + element组件做了一个小项目,记录一下图片上传的实现。         将图片存入数据库有两种方法:                 1,将图片以二进制流的方式存入数据库(数据库搬家容易,比较安全,但数据库空间的消耗大,访问会比较缓慢)

    2024年02月07日
    浏览(98)
  • node.js(express.js)+mysql实现注册功能

    /utils/db.js文件的代码如下: 项目安装指定版本bcryptjs库 再插入新用户时输入中文username mysql会 出现字符集不匹配的情况 报错情况如下: ER_CANT_AGGREGATE_2COLLATIONS: Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation ‘=’ 原因: mysql数据库建表的时候采

    2024年01月18日
    浏览(47)
  • node.js(express.js)+mysql实现登录功能

    实现步骤 1.检测表单数据是否合法 2.根据用户名查询用户的数据 3.判断用户输入的密码是否正确 4.生成JWT 的 Token 字符串 登录接口完整代码如下:controllers/user.js文件 一、检测登录表单的数据是否合法 1)安装 jOi 包,为表单中携带的每个数据项,定义验证规则: (2)安装 @e

    2024年01月19日
    浏览(44)
  • node.js(express.js)+mysql实现新增文章分类功能

    表单验证 定义路由 实现新增文章分类的功能的函数 结果

    2024年01月23日
    浏览(43)
  • Postman进阶功能实战演练

      Postman除了前面介绍的一些功能,还有其他一些小功能在日常接口测试或许用得上。今天,我们就来盘点一下,如下所示: 1.数据驱动   想要批量执行接口用例,我们一般会将对应的接口用例放在同一个Collection中,然后再通过Runner批量执行。这种方式适用于接口用例参数

    2024年02月02日
    浏览(35)
  • 如何结合antd design pro 5 结合express 上传多个文件

    在Ant Design Pro 5(基于React)的前端界面结合Express后端实现上传整个文件夹的文件,实际上是在前端进行多文件选择,并通过POST请求将文件列表发送到后端,然后由后端处理上传。由于浏览器API限制,直接上传整个文件夹并不支持,但用户可以选择文件夹内的所有文件进行上

    2024年01月21日
    浏览(51)
  • 【Postman】 测试文件上传、下载 一、使用PostMan测试文件上传接口

    1、、选择post请求方式,输入请求地址   二、填写Headers  一般是自动生成的 Key:Content-Type Value:multipart/form-data 如下图   三、填写body 选择form-data     然后选择文件file    点击添加文件,最后发送即可   1、反馈异常,先排查 Headers中 Conten-Type 与 ”文件类型“是否匹配  

    2024年02月11日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包