node express上传文件

待我称王封你为后i 2021-07-24 17:51 411阅读 0赞

1、安装
    	cnpm install multer --save
    
    2、引入
    	var multer=require('multer');
    	var fs=require('fs');
    
    3、配置
    	let upload= multer({dest:"./public/upload"})； 上传图片路径
    
    4、上传单个文件
    router.post('/',upload.single('表单input的name值'),(req,res,next)=>{
    
    	//req.file为上传文件相关信息,上传文件后,文件的名称变成随机值无后缀名,所以要还原成以前的名字
    	
    	let oldpath=req.file.destination+'/'+req.file.filename;
    	let newpath=req.file.destination+'/'+req.file.originalname;
    	fs.rename(oldpath,newpath,()=>{
    		console.log('重命名成功'+newpath);
    	})
    	
    	//成功预览
    	res.send(`<h1>上传成功</h1><img src="./upload/${req.file.originalname}"/>`);
    })
    
    5、修改表单的enctype="multipart/form-data"
    	 定义上传类型为文件类型

multer使用limits配置信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20200320093629675.png]文件上传类型信息  
![在这里插入图片描述][20200320093710581.png]代码示例:  
表单ejs:

<!DOCTYPE html>
    <html>
      <head>
        <title></title>
        <link rel='stylesheet' href='/stylesheets/style.css' />
      </head>
      <body>
        <h1>图片上传</h1>
        
        
       	<form action="/users" method="post" enctype="multipart/form-data">
    		<input type="file" name='imgfile'>
    		<button type='submit'>上传</button>
       	</form>
       	
      </body>
    </html>

路由:

ar express = require('express');
    var router = express.Router();
    var multer=require('multer');
    var fs=require('fs');
    
    //配置上传对象
    let upload= multer({ dest:"./public/upload"})
    
    /* GET users listing. */
    router.get('/', function(req, res, next) { 
        res.render('upload.ejs');
    });
    
    //upload.single('input的name值'); 上传单个文件
    router.post('/',upload.single('imgfile'),(req,res,next)=>{ 
    	//req.file为上传文件相关信息,上传文件后,文件的名称变成随机值无后缀名,所以要还原成以前的名字
    	console.log(req.file);
    	let oldpath=req.file.destination+'/'+req.file.filename;
    	let newpath=req.file.destination+'/'+req.file.originalname;
    	fs.rename(oldpath,newpath,()=>{ 
    		console.log('重命名成功'+newpath);
    	})
    	//成功预览
    	res.send(`<h1>上传成功</h1><img src="./upload/${ req.file.originalname}"/>`);
    })
    
    
    
    
    module.exports = router;

上传多个文件:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200320093606259.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA==,size_16,color_FFFFFF,t_70
[20200320093629675.png]: /images/20210724/d298a1f303254998bd8a0d2c14568561.png
[20200320093710581.png]: /images/20210724/92ad5d96bdb34ccfa5556feaaf6a8029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70 1]: /images/20210724/25b23855c31143f3a3ff602ecd75f52f.png