express + multer 文件上传入门

Theone67

发布于 2019-11-21 12:43:55

1.3K0

发布于 2019-11-21 12:43:55

文章被收录于专栏：only theone 的记录 only theone 的记录only theone 的记录

写在前面的

在web开发中，我们经常会遇到图片上传的功能，接下来我们就在express4.15.0框架中利用multer1.3.0模块来实现图片上传

开始敲代码

首先利用express-generator express框架生成器生成我们的项目这里我们采用ejs模板引擎（因为我只会这个）

express -e uploads

创建好之后，目录结构如下图所示：

然后开始安装依赖并且运行

cd uploads
cnpm install
npm start

用谷歌浏览器打开http://localhost:3000,出现下图。至此，我们的express框架已经搭建完成

接下来，安装multe中间件,并且将依赖写入package.json

cnpm install multer --save

打开package.json，我们惊奇的发现多了一行

至此，我们终于搭建好环境了，正式开始编程

我们首先写一个表单提交路由

在routes文件下的index.js中，添加一个路由

router.get('/upload', function(req, res, next) {
  res.render('upload', { title: '图片上传' });
});

接下来写一个相对应的表单提交页面

注意！提交方式必须是post，同时添加属性enctype="multipart/form-data" 要不然，http协议的头信息是不对的，关于这点，可以参考这里

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <form action="doup" method="post" enctype="multipart/form-data">
        <p>
            <label for="img">图片上传：</label>
            <input type="file" value="选择图片" id="img" name="image">
        </p>
        <p>
            <input type="submit" value="提交">
        </p>
    </form>
  </body>
</html>

运行程序，结果如下图

很幸运，程序正常运行

接下来，我们需要修改app.js，引入multer模块

var multer = require('multer');

在相应的位置上添加下面语句

//将上传上来的image文件放到项目的tmp文件夹下面
//！！!特别注意：这句话必须放在
//app.use('/', index);
//app.use('/users', users);
//这两句的前面，否则后面会失败的
app.use(multer({dest: './tmp/'}).array('image'));

运行程序之后，我们又可以惊奇的发现项目中多了一个文件夹

在浏览器上传文件后，打开tmp文件夹，发现里面的多了一个文件，名字是一串乱七八糟的东西，

很懊恼，这明明不是我上传的jpg图片呀

不要着急，这里我们把文件的名字改一下名字随便写，后缀是你上传的后缀就可以，我上传的是jpg格式的图片，很神奇的事情发生了

我们发现这不就是我们上传的文件吗，可是难道我们必须手动更改吗不要忘了nodejs很轻易就可以对本地文件进行操作利用fs模块可以轻松实现这点

在routers中的index.js我们接着更改

引入fs模块

var fs = require('fs');

添加post提交路由

router.post('/doup', function (req,res,next){
    var files = req.files;
    var oldPath = files[0].destination + files[0].filename;
    var newPath = './public/uploads/' + files[0].originalname;
    console.log(newPath);
    fs.rename(oldPath, newPath, function (err) {
        if (err) {
            throw err;
        }
        res.send('success');
    });
})

运行程序，上传图片，发现图片正常上传