node的express框架中使用Multer实现文件上传功能

引言

在处理web开发中的一些特定功能时,我们时常会遇到要处理一些比较头疼的问题。文件上传可能就是其中之一。大多数开发者都知道,处理文件上传是一项繁琐且复杂的任务,尤其是当你尝试将其与你的应用程序无缝集成时。幸运的是,Node.js社区为我们提供了一种强大且灵活的解决方案:使用Multer中间件。本篇我将详细讲解如何在Node环境中使用Multer来轻松实现文件上传功能。

Multer文件上传

先来简述一下文件上传功能的实现原理HTTP协议中,对于POST请求或者PUT请求,请求的主体部分可以包含任何类型的数据。其中,文件上传也是基于这个原理进行的。浏览器端运用form表单进行数据提交,然后服务器端根据HTTP协议的规范,对请求的主体内容进行解析和处理。

那么Multer是什么呢?Multer是一个node.js中间件,用于处理multipart/form-data类型的表单数据,它主要用于上传文件。它是基于busboy构建的,能非常高效地处理数据。

下面是一个完整的示例:

1. 引入multer

var express = require('express'); // 引入express模块
var multer = require('multer'); // 引入multer模块
var app = express(); // 创建express的实例

上述代码的目的是引入必须的模块,创建express的实例。

2. 指定文件存储目录

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

这段代码配置文件上传的目录,其中参数{dest:'public/'}表示指定上传文件的存储目录为当前目录下的public文件夹。具体地,上传的文件将被保存在public文件夹中,且Multer会自动处理文件名等内容。

3. 定义文件上传路由

app.post('/upload', upload.single('myfile'), function (req, res, next) {
    
    
  // req.file 是 'myfile' 文件 的信息
  // req.body 将具有文本域数据,如果存在的话
  res.send('文件上传成功!');
})

这个路由中的upload.single(‘myfile’), 'myfile’是我们在前端form表单中定义的name值,对应的文件的file对象添加到了req。file属性中。upload.single的作用是处理前端传过来的name为’myfile’的单个文件。而req.body属性则包含了非文件的表单数据。

  • req.file对象
 {
    
    
    fieldname: 'myfile',
    originalname: 'halou.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    destination: 'public/',
    filename: '2c362b8b8c9b5786ac423ebcd9f1d695',
    path: 'public\\2c362b8b8c9b5786ac423ebcd9f1d695',
    size: 161264
  }

这些属性的含义如下:

  • fieldname:表单中的文件字段名称。
  • originalname:上传文件的原始文件名。
  • encoding:上传文件的编码格式。
  • mimetype:上传文件的MIME类型。
  • destination:上传文件存储的目录。
  • filename:上传文件在存储目录中的文件名,由Multer自动生成。
  • path:上传文件的完整路径,包含文件名。
  • size:上传文件的大小,以字节为单位。

4. 处理文件后缀名

从上面的req.file对象可以看到,给我们返回的filename并没有后缀名,这就导致实际存储到public目录下的文件是一个二进制文件,不是一张图片了,所以我们这里要使用fs模块处理一下文件后缀名
具体实现如下:

const fs = require('fs')
const {
    
     promisify } = require('util')
const rename = promisify(fs.rename)

app.post('/upload', upload.single('myfile'), function (req, res, next) {
    
    
  // req.file 是 'myfile' 文件 的信息
  // req.body 将具有文本域数据,如果存在的话
   let fileArr = req.file.originalname.split('.')
   let filetype = fileArr[fileArr.length - 1]
   await rename(
      './public/' + req.file.filename,
      './public/' + req.file.filename + '.' + filetype
    )
  res.send('文件上传成功!');
})

5. 监听端口启动服务

app.listen(3000, function () {
    
    
  console.log('服务器启动在3000端口');
});

这行代码的作用是让应用监听指定端口的请求。

使用Multer的时候,一定要注意

  1. form表单的enctype属性一定要是multipart/form-data

  2. upload.array(fieldname[, maxCount])是用于处理数组的文件上传,第一个参数是表单上传的name名字,第二个参数是上传文件的最大数量。

  3. upload.fields(fields)是用于处理混合的文件上传,参数是一个对象数组。

  4. 如果没有设置destinationfilenameMulter会把文件保存在内存中,并将其作为Buffer对象保存在req.file.buffer属性中。

总结

总的来说,Express框架在Node.js开发中扮演着至关重要的角色,封装了许多具有高效率和轻便性质的功能。在文件上传这一需要中,Multer库的出现更使得文件上传变得简单快捷。可以说,借助Multer,我们能在Express框架中以更加简洁和高效的方式来处理用户上传的文件,极大地提升了Web应用的用户体验和开发效率。诚然,Multer只是解决文件上传问题的一种方式,开发者还可以根据实际需求选择更适合的文件处理库。然而,通过学习和实践Multer的使用,我们不仅可以增加对Node.js的理解和技能,也可以更有效地满足用户需求,打造出更好的Web应用。

猜你喜欢

转载自blog.csdn.net/jieyucx/article/details/132055353