文件小能手---multer

最新推荐文章于 2024-03-21 05:15:00 发布

Jdoit CW

最新推荐文章于 2024-03-21 05:15:00 发布

阅读量1w

点赞数 1

分类专栏： Node 文章标签： nodejs

本文链接：https://blog.csdn.net/cwq521o/article/details/107618354

版权

Node 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

内容

掌握multer 模块的用法

multer

一个非常好用的文件上传模块，官方地址：https://www.npmjs.com/package/multer
同时 formidable 模块也比较好用，推荐阅读：formidable 使用

1. 用法

此处对项目中比较常用的用法做下总结：

首先安装 multer 模块

npm install --save multer

导入此模块并进行基础配置

const multer = require('multer');
const upload = multer({ dest: './public/uploads' }).single('file'); //上传单个文件

app.post('/multertest', upload, (req, res) => {
    res.send(req.file)
})

注意：此处的 uploads 路径是相对于服务器的

测试接口(图片为例)

①：用 Postman 进行测试

在这里插入图片描述

②：用真实表单模拟提交

表单代码：

注意此处一定要写上：enctype="multipart/form-data"

 <form action="/multertest" method="POST" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" value="提交">
    </form>

提交结果：
在这里插入图片描述

服务器uploads 文件夹

在这里插入图片描述

总结：可以看到 uploads 文件夹下的图片无后缀，若存入数据库，可控性较低，所以我们需对 file上传的文件 进行处理

2. 信息处理

在实际项目中，我们往往会希望拿到图片上传到服务器的路径，然后把路径存入数据库，待到使用时，请求图片路径，写入src 属性。

①：node示例：

const multer = require('multer');
const fs = require('fs');
const upload = multer({ dest: './public/uploads' }).single('file');

app.post('/multertest', upload, (req, res) => {
    let file = req.file;
    // fs.renameSync(oldname,newname);此方法用于改变文件名（文件的oldname与newname均在file对象中）
    fs.renameSync('./public/uploads/' + file.filename, './public/uploads/' + file.originalname);
    let imgurl = 'http://localhost:3000/uploads/' + file.originalname;
    res.send(imgurl)
})

②：Postman 测试

在这里插入图片描述

③：服务器uploads 文件夹

在这里插入图片描述

此时不管是存入数据库，还是直接访问，都变得简单直接。

3. 多文件上传

多文件上传和单文件相似，只是在创建路径参数时，对其进行限制，演示略，直接上示例

示例：

const multer = require('multer');
const fs = require('fs');
let uploadMore = multer({ dest: './public/uploads' }).array('file', 5);// 此处以5为例（上传数<= 5）

app.post('/multertest', uploadMore , (req, res) => {
  let files = req.files;
  for (var k in files) {
            let file = files[k];
            fs.renameSync('./public/uploads/' + file.filename, './public/uploads/' + file.originalname);
            let url = 'http:localhost:3000/uploads' + file.originalname;
            }
})