一、multer模块
一、multer模块介绍
- multer 模块需要进行【下载】。
- multer 模块可以帮我们获取到客户端通过post【上传过来的文件】,对文件进行解析,获取到上传的文件的详情信息。
- body-parser 模块可以获取到客户端通过 【post 上传过来的数据】,不是文件。但是它不能对上传的文件进行解析获取。
此时我们如果要对上传的文件进行解析,需要用 multer 模块。
二、multer模块应用
我们现在要做客户端文件上传到服务器的操作,并对上传过来的文件放在【根目录www】下的【upload文件夹】,并对上传的文件进行文件原来上传前拓展名显示,方便我们在服务器也能看到这个文件的格式。操作如下:
- 下载 multer模块
cnpm i multer
- 引入multer 模块,服务器部署
const express = require('express');
const fs = require('fs');
const multer = require('multer');
// path模块可以帮助我们获取到文件的拓展名部分
const pathLib = require('path');
let server = express();
// multer里dest指定上传的文件在服务器的路径,我们这里上传的文件是放在根目录www下的upload文件夹里
// multer里面有一个属性,dest可以帮我们把上传的文件写入磁盘,不写入内存里,写入内存不好。太占内存了。
let multerObj = multer({'dest':'./www/upload'});
// multerObj.any()表示上传的文件不限定文件名
server.use(multerObj.any());
server.use('/',(req,res) => {
if(req.url !== '/favicon.ico') {
// 通过req.files可以获取到上传的文件数据,这里返回的是一个数组
let fileUpload = req.files[0];
// 获取fileUpload文件的拓展名
let fileExt = pathLib.parse(fileUpload.originalname).ext;
// 获取fileUpload文件的名称部分
let fileName = fileUpload.path;
// 上传文件后的新名称
let newName = fileName + fileExt;
// 把上传的旧名称更换成新名称
fs.rename(fileUpload.path, newName, (err) => {
if(err) {
res.send('上传失败')
} else{
res.send('上传成功')
}
})
}
})
server.listen(8080)
- 客户端页面部署【form.html】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 上传文件 enctype="multipart/form-data"表示该post数据发送给服务器的是文件,不是数据-->
<form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
选择文件:<input type="file" name="f1">
<input type="submit" value="上传">
</form>
</body>
</html>
-
运行服务器
image.png
-
网友评论