欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

学习 nodejs multer 模块(实现图片上传)

最编程 2024-03-02 22:42:03
...

1. 介绍

在学习他之前先要知道他是做什么的

Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件

注意: Multer 不会处理任何非 multipart/form-data 类型的表单数据。

以上是官方给出的描述,总而言之就是处理前端发送的表单数据,将数据处理后存储到固定的文件夹, 或者数据库。

2. 安装

npm install --save multer

一般是需要配合fs一起使用的,要实现文件的读写操作

npm install --save fs

3. 使用

1. 首先前端发送请求

官方提醒:不要忘记表单中的enctype=“multipart/form-data”。(限制文件类型,不是form-data么有办法处理)

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>
<!--multipart/form-data 。 指定传输数据为二进制类型,比如图片、mp3、文件。 -->
2. node接收并处理请求

1. 文件信息
后台能接收到一个file,每个文件具有下面的信息 :

Key Description Note
fieldname Field name 由表单指定
originalname 用户计算机上的文件的名称
encoding 文件编码
mimetype 文件的 MIME 类型
size 文件大小(字节单位)
destination 保存路径 DiskStorage
filename 保存在 destination 中的文件名 DiskStorage
path 已上传文件的完整路径 DiskStorage
buffer 一个存放了整个文件的 Buffer MemoryStorage

2. 先列举一个最简单的处理:

let express = require('express')
let app = express()
let upload = multer({ dest: './uploads/' })
let app = express()
// 注意这里upload.single('avatar')里面的参数要与前端请求的input中的name相同
app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file 是 `avatar` 文件的信息
  // req.body 将具有文本域数据,如果存在的话
})

Multer() 接受一个 options 对象,其中最基本的是 dest 属性,这将告诉 Multer 将上传文件保存在哪。

如果你省略 options 对象,这些文件将保存在内存中,永远不会写入磁盘。

执行之后就能将上传的文件存放在当前目录的uploads文件夹里面,但是没有文件后缀,并且文件名也是乱的

在这里插入图片描述
3. 我们再使用磁盘存储引擎 (DiskStorage)对其进行优化:

let express = require('express')
let { join } = require('path')
let multer = require('multer')
let fs = require('fs');

let app = express();
app.use(express.static(join(__dirname, 'public')))

// 1. 打开或创建一个名字叫folder文件夹
let createFolder = function(folder) {
  try {
    fs.accessSync(folder); // 打开文件夹
  } catch (e) {
    fs.mkdirSync(folder); // 创建文件夹
  } 
};
let uploadFolder = './upload/'; // 设定存储文件夹为当前目录下的 /upload 文件夹
createFolder(uploadFolder);

// 2. 设置磁盘存贮
let storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, uploadFolder); // 他会放在当前目录下的 /upload 文件夹下(没有该文件夹,就新建一个)
  },
  filename: function(req, file, cb) { // 在这里设定文件名
    cb(null, file.originalname); // file.originalname是将文件名设置为上传时的文件名,file中携带的
    // cb(null, Date.now() + '-' + file.originalname) // 加上Date.now()可以避免命名重复
  }
})

let upload = multer({ storage: storage });

app.post('/upload', upload.single('upload'), function(req, res, next) {
  res.send("success");
  next();
});

diskStorage有两个选项可用:destination 和 filename。他们都是用来确定文件存储位置的函数。

let upload = multer({ storage: storage }) multer() 的参数传入变成{ storage: storage }

在这里插入图片描述

参考文档:官方中文文档