Nodejs的学习Ⅷ（文件上传模块multer、文件下载、layui简单说明）

一、文件上传的中间件模块multer

详情参看官网

安装

cnpm install multer --save

二、multer的使用

html页面

<form action="http://localhost:8080/" method="post" enctype="multipart/form-data">		// 注意上传文件时要enctype="multipart/form-data"
	<input type="file" name="files" value="指定文件">	// 指定input的type为file
    <br><br>
    <input type="submit" value="上传">
</form>

node代码

const express=require("express");
const multer=require('multer');			
const upload=multer({dest:'./public/upload'});			// 初始化上传对象,上传的资源存储路径，dest：destination（目的地）
const fs = require('fs');
​
var app=express();

​app.get('/', (request, response, next) => {
  response.render('fileup')
})

app.post("/fileup",upload.single("files"),function(req,res){   //files为input type="file"的name值，
//届时文件上传已经成功（不过文件名为随机值，需要更名）
	console.log(request.file);

	// 以下是在文件已经上传成功的情况下给文件重命名
    var oldFile=req.file.destination + '/' + req.file.filename; 	//指定旧文件的路径,记得路径之间加/
    var newFile=req.file.destination + '/' + req.file.originalname;   //指定新文件的路径,记得路径之间加/
    fs.rename(oldFile,newFile,function(err){		// 文件重命名
        if(err){
            res.send('重命名失败！');
        }else{
            res.send('重命名成功！');
        }
    });

	response.send('<img src="/upload/'+ request.file.originalname'"/>')	// 注意这里是以upload路径开始，而不是public（可能是中间件的作用）
});
​
app.listen(8080);

request.file的结果：

{
  fieldname: 'files',						// input type="file"的name值
  originalname: 'MQZ3SVZ`1G@F78XF1@`W{83.png',		// 用户计算机上的文件的名称
  encoding: '7bit', 				// 文件编码
  mimetype: 'image/png',				// 文件的 MIME 类型
  destination: './public/upload',				// 保存在服务器的路径
  filename: '832891ebbabf93a7961cc00b45980f39',				// 保存在服务器中的文件名
  path: 'public\\upload\\832891ebbabf93a7961cc00b45980f39',		//已上传文件的完整路径
  size: 14205 					//文件大小（字节单位）
}

三、上传多个文件

在多个文件上传时要注意input要有multiple属性，而在服务端上，我们需要将single()改为array(“name”,num);的形式来接收多个文件的上传请求。最后对他们全部进行重命名。

在这之前我们首先看看multer支持哪些文件上传方式：

.single(fieldname)  	// 接受一个为fieldname命名的文件
.array(fieldname[, maxCount])   // 接受一个以 fieldname 命名的文件数组。可以配置 maxCount 来限制上传的最大数量。
.fields(fields) // 接受指定 fields 的混合文件。fields是一个拥有name和maxCount的数组对象（多个input多个name）
.none()     // 只接受文本域。如果任何文件上传到这个模式，将发生 "LIMIT_UNEXPECTED_FILE" 错误。
.any()  // 接受一切上传的文件。

举例：

html文件：

<form action="http://localhost:8080/" method="post" enctype="multipart/form-data">
            <input type="file" name="files" value="指定文件" multiple>
            <br><br>
            <input type="submit" value="上传">
        </form>

node代码：

const express=require("express");
const multer=require('multer');
var upload=multer({dest:'./public/upload'});
var fs = require('fs');
​
​
var app=express();
​app.get('/', (request, response, next) => {
  response.render('fileup')
})

app.post("/fileup",upload.array("files",5),function(req,res,next){
    req.files.forEach(function(ele,index){		// req.files是数组（不是伪数组）
        console.log(ele);
        var oldFile=ele.destination+ '/' +ele.filename;   //指定旧文件,记得路径之间加/
        var newFile=ele.destination+ '/' +ele.originalname;   //指定新文件,记得路径之间加/
        fs.rename(oldFile,newFile,function(err){
            err?console.log('上传失败！'):console.log('上传成功！');
        });
    });
    res.send("成功上传");			// 上传成功+改名成功
});
​
app.listen(8080);

四、通过limits来限制上传文件

// limits对象的一些配置
fieldNameSize：   field 名字最大长度    100 bytes
fieldSize：   field 值的最大长度    1MB
fields：  非文件 field 的最大数量 无限
fileSize：    在 multipart 表单中，文件最大长度 (字节单位)   无限
files：   在 multipart 表单中，文件最大数量  无限
parts：   在 multipart 表单中，part 传输的最大数量(fields + files)    无限
headerPairs： 在 multipart 表单中，键值对最大组数 2000
如果你上传的文件超出这些设定，MulterError模块将会启用，该模块在node_modules/multer/lib/multer-error.js上：

我们可以使用err.code定位到该错误，他有7种code方式，不同设置会返回不同code

LIMIT_PART_COUNT
LIMIT_FILE_SIZE
LIMIT_FILE_COUNT
LIMIT_FIELD_KEY
LIMIT_FIELD_VALUE
LIMIT_FIELD_COUNT
LIMIT_FIELD_COUNT

简单实例：

html依然不变，node代码如下：

const express=require("express");
const multer=require('multer');
var upload=multer({dest:'./public/upload',limits:{fileSize: 1024 * 1024 * 20,files: 5}});
var fs = require('fs');
​
var app=express();
​​app.get('/', (request, response, next) => {
  response.render('fileup')
})

app.get("/fileup",upload.array("files",5),function(req,res,next){
    req.files.forEach(function(ele,index){
        var oldFile=ele.destination+ '/' +ele.filename;   //指定旧文件
        var newFile=ele.destination+ '/' +ele.originalname;   //指定新文件
        fs.rename(oldFile,newFile,function(err){
            err?console.log('上传失败！'):console.log('上传成功！');
        });
    });
    next();
    res.send("上传成功！");				// 上传成功+改名成功
});
​
app.use(function(err,req,res,next){			// 文件上传错误具体信息的捕获
    if (err.code==='LIMIT_FILE_SIZE'){
        res.send('File is too large');
    }else if(err.code==='LIMIT_FILE_COUNT'){
        res.send('Too many files');
    }
})
​
app.listen(8080);

五、用axios实现文件上传

点击这里
作者：bayi_lzp
来源https://juejin.im/post/5cff13ab6fb9a07ee1691e82

六、文件下载

文件下载非常简单，仅需通过res.download() 执行即可

res.download('/report-12345.pdf');

实例：

html：

<form action="http://localhost:8080/" method="post" enctype="application/x-www-form-urlencoded">
	<input type="file" name="files" value="选择下载的文件"><br><br>
    <input type="submit" value="下载">
</form>

nodejs

const express=require("express");
const path = require('path')

var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', (request, response, next) => {
  response.render('filedown')
})

app.post('/filedown/:imgname',(req, res, next) => {
  let urlpath = './public/upload/' + req.params.imgname		// 拼接资源路径，注意这里要把路径写完整
  res.download(urlpath)					// 开始下载
})

app.listen(8080, () => {
  console.log('服务器已连接');
})

七、layui简单说明

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。她区别于那些基于 MVVM 底层的 UI 框架（如：Vue）

layui下载文件的目录：

lay的使用与bootstrap类似，在这里就不赘述了，具体参考官网

本文只用于个人学习与记录