新浦京81707con > 软件下载 > 澳门浦京娱乐在线项目流程,传图片的两种方式

原标题:澳门浦京娱乐在线项目流程,传图片的两种方式

浏览次数:186 时间:2019-05-08

node上传图片第二种艺术

  • 新建项目文件夹 littleAlbum
  • littleAlbum 中树立 MVC 四个文本夹
  • littleAlbum 创建 public 文件夹存放静态财富
  • littleAlbum 创设 uploads 文件夹存放路由能源
  • 每1个种类都有3个 app.js 文件作为入口文件
  • 通过 cmd 命令行输入 npm init 来开首化项不熟悉成 package.json 文件
  • 在 public 文件夹下创设 cssfontsimagesjs 等静态财富文件夹
  • 在 views 文件夹下创设 ejs 文件,用于渲染路由分界面
  • 命令行输入 npm install express --save 引进 express 功用包 --save 是将修改音讯更新到 package.json 文件,生成 node_modules 文件夹

一,首先引进模块 "connect-multiparty": "~1.2.5",

在 app.js 中设置模版

  • 指令行输入 npm install ejs --save
var express = require('express');
var app = express();
//设置模版
app.set('view engine','ejs');
//设置中间件
//设置静态资源
app.use(express.static('./public'));
  • 在 controllers 文件夹下创设 router.js 文件,创设package.json 文件,并修改package.json 中的 main 使其针对性 router.js 文件
  • 在 router.js 文件中贯彻模版渲染
//在这个文件中,我们需要设置一些函数,用来处理接收到路由后的设置
//设置当接收到默认路由后的处理函数
exports.showIndex = function(req,res,next){
    //res.render('index',{albums:['小猫','小狗','小白']})
}

 在package.json中添加 "connect-multiparty": "~1.2.5",

在 app.js 文件中安装显示主分界面路由

//设置默认的路径
//当我们接受到对应的请后,我们需要做出处理,为了方便后面的复用代码的管理
//我们最好设置一个文件用来管理接受到路由后的处理
//一般这个属于用来控制界面的设置,所以我们放在控制器中
app.get('/',router.showIndex)

在 app.js 中引入 router.js;```var router = require('./controllers');

  • 在 app.js 中调用 app.get('/',router.showIndex);
  • 在实质上开支中,渲染时的多寡,是通过 models 上边对应的文书来收获的,那样数据才是动态的,能够升官代码扩大性
  • models 文件夹下创制 files.js 文件用来管理数量
  • 将有着数据文件夹放在 uploads 文件夹下
  • file.js 文件
//读取文件导入 fs 包
var fs = require('fs');
exports.showAllAlbum = function(callBack){
    //读取文件夹下的信息
    fs.readdir('./uploads',function(err,files){
        if(err){
            callBack('没有这个目录',null);
            return;
        };
        //利用闭包遍历文件夹下所有文件,并判断是否是文件夹
        //创建一个数组储存文件夹
        var albumArr = [];
        (function iterator(i){
            //判断停止条件
            if(i == files.length){
                console.log(albumArr);
                callBack(null,albumArr);
                return;
            };
            fs.stat('./uploads/',function(err,stats){
                if(stats.isDirectory()){
                    albumArr.push(files[i]);
                };
                iterartor(i 1);
            })
        })(0)
    })
}
  • 配置 router.js 文件
//导入数据模型包
var file = require('../models/file.js');
exports.showIndex = function(req,res,next){
    //res.render('index',{albums:['小猫','小狗','小白']})
    //因为 showAllAlbum 里面有回调,那么可能我们在渲染的时候,回调还没有回来,就没有对应的数据可以渲染
    //所以在调用对应的函数的时候直接设置回调,然后在对应的回调中处理渲染
    file.showAllAlbum(function(err,albums){
        if(err){
            next();
            return;
        };
        res.render('index',{
            albums:albums;
        })
    })
}

接下来在命令中切换成花色目录,使用npm命令:npm installl;

设置点击展现文件夹下文件

  • app.js 文件中装置点击路由
  • 因为急需加载文件夹下的图片财富是静态财富,所以先用 static 加载
//当我们加载图片的时候,如果放在对应的public下面的时候,会给对应的饿public做静态路由
//所以下面的图片可以直接读取到
//但是我们如果从uploads中获取出来的的图片,需要显示到界面上的时候,需要给图片设置路由
//所以我们可以给uploads中的资源设置静态路由
//一个node程序中可以设置多个静态路由
app.use(express.static('./uploads'));
//设置点击跳转路由,因为需要接收所点击的是哪个文件夹,所以需要传递参数
app.get('/:albumName',router.showImages);
  • 在 file.js 文件中拍卖数量
exports.showAllImage = function(albumName,callBack){
    fs.readdir('./uploads/' albumName,function(err,files){
        if(err){
            callBack('没有这个目录',null);
            return;
        };
        var imagesArr = []
        (function iterator(i){
            if(i == files.length){
                callBack(null,imagesArr);
                console.log(imagesArr);
                return;
            };
            fs.stat('./uploads/' albumName '/' files[i],function(err,stat){               
                imagesArr.push(files[i]);
            });
            iterator(i 1);
        })(0)

    })
}
  • 在 router.js 文件中拍卖数量的渲染
  • 在 views 文件夹下建设构造 album.js 文件,展现图片的模板
exports.showImages = function(req,res,next){
    //获取点击时传过来的参数
    var albumName = req.params.albumName;
    file.showAllImage(albumName,function(err,imagesArray){
        if(err){
            next();
            return;
        };
        res.render('album',{
            albumname:albumName,
            images:imagesArray
        })
    })
}

 基本配备完结

设置上传分界面路由

  • 在 app.js 文件中,设置点击路由
app.get('/up',router.showUp);
  • 在 router.js 中配备路由
  • 在 views 文件夹中确立 up.ejs 模版
exports.showUp = function(req,res,next){
    file.showAllAlbum(function(err,albums){
        if(err){
            next();
            return;
        };
        res.render('up',{albums:albums})
    })
}

澳门浦京娱乐在线 1

设置文件的上传

  • 在 app.js 中装置文件上传的 post 请求
app.post('/up',router.doPost)
  • 在 router.js 文件中决定文件上传
  • 命令行中输入npm install formidable --save 安装 formidable 工具包,并且在 router.js 中引入;
  • 开创文件夹 tempload仓库储存上传上来的公文
var formidable = require('formidable');
exports.doPost = function(req,res,next){
    var form = new formidable.IncomingForm();
    //设置上传的路径
    //在node中,凡是和文件操作有关的路径的设置,尤其是需要引入包的一些文件,我们可以使用当前的盘符作为基本的
    form.uploadDir('./tempload');
    //解析对应的文件,使用parse
    form.parse(req,function(err){
        if(err){
            next();
            return;
        };
        res.send('success');
    })
}

index.html

安装显示错误页面

  • 在 views 文件夹中确立 err.ejs 文件编写制定彰显错误页面
  • 在 app.js 中央直机关接直接操作渲染
//设置一个错误路由,如果上面所有的都没有匹配到,我们就设置错误的路由,无论是get还是post,我们都要设置
//错误路由,所以使用use,上面所有的路由都匹配完成后,其余的路由都是错误页面
//所以我们可以直接使用use(funtion)
app.use('/',function(req,res){
    res.render('err');
})
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <form action="/test" method="post">
     姓名: <input type="text" name="name"><br>
      年龄: <input type="text" name="age"><br>
      <input type="submit" value="提交">
      </form>
      <br>
      <a title="上串" href="/upload">上传</a>
    <a href="/uploadtupian" title="上传">上传多个图片例子</a>>>

  </body>
</html>

 

app.js本白标注部分为上传图片代码

 

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var ejs=require('ejs');
var routes = require('./routes/index');
var users = require('./routes/users');
var upload=require('./routes/upload');
var uploadtupian=require('./routes/uploadtupian');
var test=require('./routes/test');
var multer=require("multer");
var app = express();
var flash=require('connect-flash');
var md5=require('md5');
  var fs = require('fs');
  var multipart=require('connect-multiparty');
// view engine setup
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.use(flash());

//跨域请求

app.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

    if (req.method == 'OPTIONS') {
        res.send(200);
    }
    else {
        next();
    }
});

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
/*app.use(express.bodyParser({uploadDir:'./public/.images'}));*/

app.use('/', routes);
app.use('/users', users);
app.use('/test', test);
app.use('/up',upload);
app.use('/uploadtupian',uploadtupian);


app.post('/upload', multipart(), function(req, res){
  console.log(req.body.name);
  //get filename
  var filename = req.files.files.originalFilename || path.basename(req.files.files.ws.path);
  //copy file to a public directory
  //修改文件名
   console.log(filename);
     var newname=56;


  var targetPath = path.dirname(__filename)   '/public/images/'   filename;

  //copy file
  fs.createReadStream(req.files.files.ws.path).pipe(fs.createWriteStream(targetPath));

  var newname=path.dirname(__filename) '/public/images/' newname '.jpg';
      filename=fs.rename(targetPath,newname,function(err){
        if(err){
          console.log('改名失败');
        }
        else{
  console.log("改名成功");

}
});
  //return file url
  res.json({code: 200, msg: {url: 'http://'   req.headers.host   '/'   newname}});

});
/* app.post('/file-upload', function(req, res) {
    console.log(req);
     // 获得文件的临时路径
     var tmp_path = req.files.thumbnail.path;
    // 指定文件上传后的目录 - 示例为"images"目录。 
    var target_path = './public/images/'   req.files.thumbnail.name;
    // 移动文件
    fs.rename(tmp_path, target_path, function(err) {
      if (err) throw err;
      // 删除临时文件夹文件, 
      fs.unlink(tmp_path, function() {
         if (err) throw err;
         res.send('File uploaded to: '   target_path   ' - '   req.files.thumbnail.size   ' bytes');
      });
    });
  });*/
app.use('/upload',function(req,res){

    res.render('upload',{
        title:"文件上产"

    });
});
/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
/*//文件上长
app.use(multer({
dest:'./public/images',
rename:function(fieldname,filename){
    return filename;
}

}))*/
/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

 

 upload.html

<!DOCTYPE html>
<html>
<head>
 <title><%=title%></title>
</head>
<body>
<form  method='post'  enctype='multipart/form-data' id = "fromUploadFile">

  姓名: <input type="text" name="name"><br>
 <input type="file" name="files" class="from-control"><br>

 <button class='btn btn-primary' onclick="uploadFile()">上传</button>
</form>
<div class="cow" style="text-align: center">
 <img id=imgShow>
 <p id="#spanMessage"></p>
</div>
</body>
 <script src="http://www.regboy.com/uploads/allimg/190508/1QU9C08-1.jpg"></script>
 <script type="text/javascript" src="js/ipload.js"></script>

</html>

 ipload.js

function uploadFile(){
 var fromData=new FormData($("#fromUploadFile")[0]);
 $.ajax({
  url: '/uploadhaha',
  type: 'post',
  data: fromData,
  async: false,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
      if(200 === data.code) {
        $("#imgShow").attr('src', data.msg.url);
        $("#spanMessage").html("上传成功");
      } else {
        $("#spanMessage").html("上传失败");
      }
      console.log('imgUploader upload success, data:', data);
    },
    error: function(){
      $("#spanMessage").html("与服务器通信发生错误");
    }
  });
}

 二.上传多组照片

导入模块 "formidable":"一.一.1"

本文由新浦京81707con发布于软件下载,转载请注明出处:澳门浦京娱乐在线项目流程,传图片的两种方式

关键词: 新浦京81707con 日记本

上一篇:澳门新葡亰518JS异步编程,ES6中的异步

下一篇:没有了