使用node第三方模块multer向服务器上传文件

一、文件上传思路

1. 通过前端表单中的 file 文件框，选择文件并提交到指定后端接口
2. 后端接收到文件信息
3. 通过multer模块，将文件保存到服务器
4. 后端向前端返回服务器文件路径

二、multer模块

1. 注意multer只能接收 form-data 编码数据

2. 前端表单需要添加自定义属性：enctype="multipart/form-data"

3. 下载：npm i multer -S

4. 引入：const multer = require("multer");

5. 创建multer实例：const upload = multer({ dest: './www/uploads' })

   • 同时，准备将接收到的文件，存入'./www/uploads'目录

6. 注册multer中间件：app.use(upload.any());

   • any表示，可以接收任意文件

7. 定义post接口，接口的 request 对象有 files 属性，保存文件对象数组，对象内属性有：

   • fieldname: 表单name名
   • originalname: 上传的文件名
   • encoding： 编码方式
   • mimetype: 文件类型
   • destination: 保存路径
   • filename： 保存后的文件名 不含后缀
   • path： 保存磁盘路径+保存后的文件名 不含后缀
   • size：尺寸

8. multer会自动将文件转存到指定位置，但文件名默认随机生成，且无扩展名，需要使用node内置模块 fs 模块修改文件名

9. 使用 response 对象，将改名之后文件的服务器路径发送给前端。

三、具体实现

项目目录

前端文件

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

服务器文件

// app.js
const express = require("express");
const fs = require("fs");
const path = require("path");
// 引入multer模块
const multer = require("multer");

const port = 3000;
const fileTarget = "/uploads";

const app = express();

app.use(express.static("./www"));

// 创建multer实例
const upload = multer({ dest: './www'+fileTarget })

// 注册multer：接收任意文件
app.use(upload.any());

// 定义接口
app.post('/uploadFile', function (req, res, next) {
    // multer模块接收到的文件对象（数组）
    console.log(req.files);
	// 准备返回前端数据
    let resData = {code:1,msg:[]};
    // 遍历文件对象数组
    req.files.forEach(val=>{
    	// 将上传的文件名称信息解析成对象（原文件名）
        const fileObj = path.parse(val.originalname);
        // 配合原文件信息对象，将multer随机生成的文件名拼接在前
        // 既保证每次上传文件出现同名问题，又标记了原文件名称和扩展名
        const newFile = val.path + "-" + fileObj.base;
		// 使用fs模块将multer生成的文件名修改成 新文件名
        fs.renameSync(val.path, newFile);
		// ["http://localhost:3000/uploads/2346819e7fc4497125031febbfb066c3-avatar.jpg"]
		resData.msg.push(`${req.protocol}://${req.hostname}:${port}${fileTarget}/${val.filename}-${fileObj.base}`);
    })
    // {"code":1,"msg":["http://localhost:3000/uploads/2346819e7fc4497125031febbfb066c3-avatar.jpg"]}
    res.send(resData);
})

app.listen(3000,()=>console.log("server start 3000"));

四、git地址

项目完整源码已上传gitee，欢迎下载体验https://gitee.com/liyangyf/upload_file.git

---

文中如有瑕疵或不足，欢迎留言交流…