nodejs上传图片模块做法;

寻技术 JS脚本 / Node.Js 2023年07月12日 81

服务端代码:

 var express = require('express');
 var swig = require('swig');
 //1、引入multer模块
 var multer = require('multer');
 var fs = require('fs');
 var path = require('path');
 var redis = require('./modules/redis');
 
 var app = express();
 app.use(express.bodyParser());
 //设置swig模板方法;
 app.engine('html', swig.renderFile);
 app.set('view engine', 'html');
 app.set('views', __dirname + '/views');
 
 // Using Multer for file uploads.
 //2、配置multer中间件参数;
 app.use(multer({ dest: './uploads/'}));
 //3、设置路由参数,原理就是通过第2步中的中间件后,req.files会带上传过来的图片信息;
 app.post('/form',function(req,res){
 
     //console.log(req.files.image);  // 上传的文件信息
     //console.log(req.body);
     //console.log(req.files);
 
     var des_file = __dirname + "/uploads/" + req.files.image.originalFilename;
     console.log(__dirname);
     console.log(req.files.image.originalFilename);
     console.log(des_file);
 
 //4、图片上传进来后,被保存在内存路径中(个人理解,很重要,姑且这样理解);
     fs.readFile( req.files.image.path, function (err, data) {
         console.log(data)
 
 //5、通过fs模块读取图片保存的内存路径,并将图片读出的信息,保存到设置好的目录里;
         fs.writeFile(des_file, data, function (err) {
             if( err ){
                 console.log( err );
             }else{
                 response = {
                     message:'File uploaded successfully',
                     filename:req.files.image.originalFilename
                 };
             }
             //console.log( response );
             res.end( JSON.stringify( response ) );
         });
     });
 });
 
 
 app.post('/',function(req,res){
     if(!(req.body.owner&&req.body.type&&req.body.content)){
         if(req.body.type&&(["male","female"].indexOf(req.body.type) === -1)){
             return res.json({code:0,msg:"类型错误"})
         }
         return res.json({code:0,msg:"信息不完整"})
     }
     redis.throw(req.body,function(result){
         res.json(result);
     })
 });
 
 app.get('/',function(req,res){
     console.log(req.query);
     if(!req.query.user){
         return res.json({code:0,msg:"信息不完整"});
     }
     if(req.query.type && (["male","female"].indexOf(req.query.type) === -1)){
         return res.json({code:0,msg:"类型错误"});
     }
     redis.pick(req.query,function(result){
         res.json(result);
     })
 });
 app.get('/form',function(req,res){
     res.render('form');
 });
 
 //require("./test/test.js").b();
 //
 //
 //require("./test/test.js").a();
 //var cc = require("./test/test");
 //cc.b();
 //cc.a();
 
 app.listen(3000);

前端form表单代码:

 <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Document</title>
 </head>
 <body>
 <!--form若是上传图片必须带上这个属性  enctype="multipart/form-data"-->
 <form action="" method="post" enctype="multipart/form-data">
     <input type="text" name="owner" value="123131414"/>
     <input type="file" name="image"/>
     <input type="submit" value="上传文件" />
 </form>
 </body>
 </html>

 最重要的一点是:

<input type="file" name="image"/>

必须加上 name="image"
必须加上 name="image"
必须加上 name="image"

重要的事情说三遍
关闭

用微信“扫一扫”