文件小能手---multer

约定不等于承诺〃 2023-03-02 04:59 1阅读 0赞

## 内容 ##

> 掌握multer 模块的用法

## multer ##

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

## 1. 用法 ##

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

1.  首先安装 `multer` 模块

npm install --save multer

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

const multer = require('multer');
    const upload = multer({  dest: './public/uploads' }).single('file'); //上传单个文件
    
    app.post('/multertest', upload, (req, res) => { 
        res.send(req.file)
    })

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

1.  测试接口(图片为例)

①：用 `Postman` 进行测试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]

②：用真实表单模拟提交

表单代码：

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

提交结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]

1.  服务器`uploads` 文件夹

![在这里插入图片描述][20200727193115708.PNG]

**总结**：可以看到 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 测试

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]

③：服务器`uploads` 文件夹

![在这里插入图片描述][20200727193707555.PNG]

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

## 3. 多文件上传 ##

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

示例：

#### over ####

[https_www.npmjs.com_package_multer]: https://www.npmjs.com/package/multer
[formidable]: https://blog.csdn.net/cwq521o/article/details/105575904
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70]: /images/20230208/01dbdaec175f4bd4aa384b7ff53fdb3c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 1]: /images/20230208/9d470776acfc466aae88ec6c2e18fd8b.png
[20200727193115708.PNG]: /images/20230208/1159cf2a03eb4a7ab027257c61315ffe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70 2]: /images/20230208/ed0d0bc22c67498cb3395426a52a5756.png
[20200727193707555.PNG]: /images/20230208/1cf3a4f1017a4012892e44337b61a56e.png