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

最新推荐文章于 2024-09-23 09:32:33 发布

jieyucx

最新推荐文章于 2024-09-23 09:32:33 发布

阅读量1.4k

点赞数

分类专栏： node 文章标签： express

本文链接：https://blog.csdn.net/jieyucx/article/details/132055353

版权

node 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

引言

在处理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的时候，一定要注意：

在form表单的enctype属性一定要是multipart/form-data。
upload.array(fieldname[, maxCount])是用于处理数组的文件上传，第一个参数是表单上传的name名字，第二个参数是上传文件的最大数量。
upload.fields(fields)是用于处理混合的文件上传，参数是一个对象数组。
如果没有设置destination和filename，Multer会把文件保存在内存中，并将其作为Buffer对象保存在req.file.buffer属性中。

总结

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