zoukankan      html  css  js  c++  java
  • express + multer 文件上传入门

    写在前面的

    在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');
    	});
    })
    

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

    至此,我们的上传图片已经大功告成!

  • 相关阅读:
    冒泡排序
    数据结构和算法关系
    js获取ifram对象
    java STL
    bufferedReader 乱码问题
    css animation让图标不断旋转
    apply通过实例理解
    jquery.ajaxfileupload.js
    JDBC getMetaData将结果集组装到List
    Android开发之使用BaseAdapter的notifyDataSetChanged()无法更新列表
  • 原文地址:https://www.cnblogs.com/theone67/p/6698762.html
Copyright © 2011-2022 走看看