node.js学习（15）——上传（multer）

上节我们学学习了模板引擎，本节我们学校文件上传。
目录结构如下：

20190530154855.png

1.上传（`multer`）

我们在upload.html添加下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传demo</title>
</head>
<body>
    <form action="http://localhost:8080/infor" method="post" target="stop" enctype="multipart/form-data">
        <input type="value" name='account'>
        <input type="file" name='user'>
        <input type="submit" value="上传">
    </form>
    <!-- 阻止提交跳转页面 -->
    <iframe  name="stop" style="display:none;"></iframe> 

</body>
</html>

在server.js添加下面代码

const express=require('express');
const multer=require('multer');
// const bodyParser=require('body-parser');
const server=express();
// server.use(bodyParser.urlencoded())
var objMulter=multer({dest: './uploadImages'}); //设置上传的的图片保存目录
server.use(objMulter.any());

server.post('/infor',function(req,res,next){
    console.log(req.body,req.files)
    res.send({
        code:1,
        msg:'成功'
    })
})
server.listen(8080);

我们使用form提交数据时，如果需要提交的数据中含有图片、音视频等，需要给form添加enctype="multipart/form-data"属性，如果不加，默认以enctype="application/x-www-form-urlencoded"编码传输。如果需要详情了解该属性，可以网上搜索了解。具体体现在请求头的Content-Type上，比如

20190530155923.png

前面我们讲的body-parser组件只能处理enctype="application/x-www-form-urlencoded"编码的数据，并放到req.body中，所以如果含有图片等数据，需要借助中间件，这里使用multer中间件。
multer({dest: './uploadImages'})表示将上传的图片传输到指定文件夹（这里以uploadImages为例，如果没有该文件夹，会自动生成）,如果不添加dest属性，这些文件将保存在内存中，永远不会写入磁盘。
objMulter.any()表示接收任何上传的数据，对应的有个objMulter.single('user')(表示只接收name为user的上传数据)，本例使用objMulter.any()接收任何上传的数据。
multer会将上传的文件信息写到req.file中，表单的文本域信息放到 req.body中（所以不需要再引入body-parser）

我们测试下如下：

222.gif

我已经将截图中打印的数据复制出来如下：

//req.body
{ account: 'eee' }

//req.files
[{
  fieldname: 'user', //表单的name属性值
  originalname: '五月排行榜.png', //上传的图片原始文件名（含后缀）
  encoding: '7bit', //文件编码
  mimetype: 'image/png', //上传图片格式（MIME 类型）
  destination: './www/uploadImages', //上传后的相对图片路径（不包含文件）
  filename: 'db5debb87b20a324a36b618f27441fca', //上传的图片新生成的文件名（不含后缀）
  path: 'www\\uploadImages\\db5debb87b20a324a36b618f27441fca', //上传后的完整图片路径（包含文件）
  size: 1182425 //上传图片大小
}]

至此，我们已经完成了一个简单的文件上传。但是上传的文件由于不包含文件后缀，所以无法预览，那么怎么才能给上传的图片添加后缀呢？在添加后缀前，我们先了解下path模块（获取后缀）与fs模块（重写文件名）

2.path模块

新建path.js文件，增加如下代码：

const path=require('path');
const file1='/home/user/dir/file.txt';
const str=path.parse(file1)
console.log(str)

运行path.js输出结果如下：

{ 
    root: '/',
    dir: '/home/user/dir',
    base: 'file.txt',
    ext: '.txt',
    name: 'file'
 }

通过path模版的parse方法,ext属性可以获取一个路径的后缀.

3.fs模块

新建a.txt文件以及rename.js,我们现在通过fs模块将a.txt重命名为b.txt,我们在rename.js增加下面代码

const fs=require('fs');
fs.rename('a.txt','b.txt',function(err){
    if(err){
        console.log('重命名错误');
    }else{
        console.log('重命名成功');
    }
})

执行代码，我们发现a.txt已经变为b.txt

init.gif

4.上传图片增加预览

上面我们讲到上传的文件由于不包含文件后缀，所以无法预览，现在我们通过path模块与fs模块来实现预览功能

更改server.js如下

const express=require('express');
const multer=require('multer');
const path=require('path');
const fs=require('fs');
// const bodyParser=require('body-parser');
const server=express();
// server.use(bodyParser.urlencoded())
var objMulter=multer({dest: './uploadImages'});
server.use(objMulter.any());

server.post('/infor',function(req,res,next){
    const newname=req.files[0].path+path.parse(req.files[0].originalname).ext
    fs.rename(req.files[0].path,newname,function(err){
        if(err){
            res.send('上传失败')
        }else{
            res.send('上传成功')
        }
    })
})
server.listen(8080);

上面的代码应该很容易看懂，获取后缀，重命名文件。测试如下

er.gif

node.js学习（15）——上传（multer）

1.上传（multer）

2.path模块

3.fs模块

4.上传图片增加预览

猜你喜欢

1.上传（`multer`）