这篇文章主要介绍了node.js实现多图片上传实例,包括路由、控制器和视图的源码,重点在图片上传处理程序,需要的朋友可以参考下

先上效果图:

这是我当时做多图片的代码,拿出来给大家借鉴一下(有些地方需要亲们自己改一下,大方向是对的)

总共涉及到三处文件(常规来说)

1.路由入口文件(我这里是/routes.js,很多时候会在/app.js)


  //添加美食
  app.all('/add', users.add);

2.路由控制器文件(我这里是/routes/users.js)

//添加美食
exports.add = function (req, res) {
if (req.method == "GET") {
  var user = {};
if(req.session.user){
user = req.session.user;
}
  res.render("users/food_add", {title:'发布美食-'+config.name,name:config.name,user:user});
  } else  if (req.method == "POST") {
  //获取数据
  var x = req.body.x;
  var y = req.body.y;
  var cat_id = req.body.cat_id;
  var cat_name = req.body.cat_name;
  var address = req.body.address;
  var title = req.body.title;
  var desc = req.body.desc;
  var content = req.body.content;
  var pics = '';
  var price = req.body.price;
  var tags = req.body.tags;
  var add_time = Date.parse(new Date())/1000;
  var support = 0;
  var uid = req.body.uid;

  //处理图片上传
  //console.dir(req.files);

  var file_obj = req.files.pics;
  //console.log(file_obj.length);
  var file_obj2 = [];
  for(var i=0;i<file_obj.length;i++){
  if(file_obj[i].name){
  file_obj2.push(file_obj[i]);
  }
  }
  var length = file_obj2.length;
  if(length>0){
  file_obj2.forEach(function(item,index){
  if(item.path){
  var tmpPath = item.path;
  var type = item.type;
  var extension_name = "";
  //移动到指定的目录,一般放到public的images文件下面
  //在移动的时候确定路径已经存在,否则会报错
  var tmp_name = (Date.parse(new Date())/1000);
  tmp_name = tmp_name+''+(Math.round(Math.random()*9999));
  //判断文件类型
  switch (type) {
  case 'image/pjpeg':extension_name = 'jpg';
  break;
  case 'image/jpeg':extension_name = 'jpg';
  break;
  case 'image/gif':extension_name = 'gif';
  break;
  case 'image/png':extension_name = 'png';
  break;
  case 'image/x-png':extension_name = 'png';
  break;
  case 'image/bmp':extension_name = 'bmp';
  break;
  }
  var tmp_name = tmp_name+'.'+extension_name;
  var targetPath = 'public/images/' + tmp_name;
  console.log(tmpPath);
  //将上传的临时文件移动到指定的目录下
  fs.rename(tmpPath, targetPath , function(err) {
  if(err){
  throw err;
  }
  if(pics){
  pics += ','+tmp_name;
  }else{
  pics += tmp_name;
  }
  //判断是否完成
  //console.log(index);
//删除临时文件
  fs.unlink(tmpPath, function(){
  if(err) {
  throw err;
  }else{
  if((index+1)==length){
  console.log(targetPath);
  //上传处理完成
  //数据
  var data = {
  x:x,//经度
  y:y,//维度
  cat_id:cat_id,//分类id
  cat_name:cat_name,//分类名称
  address:address,//地址
  title:title,//标题
  desc:desc,//简介
  content:content,//内容
  pics:pics,//图片字段,以','隔开多张图片
  price:price,//价格
  tags:tags,//标签 以','隔开多个
  add_time:add_time,//支持度
  support:support,//支持度 默认为0
  uid:uid//用户id 可匿名
  };
  food_preDao.insert(data, function (err, food) {
  if(err){
  res.json({err:100,content:'数据库错误'});
  }else{
  res.json({err:0,content:'发布成功!',data:food});
  }

  });
  }
  }
  });


  });
  }
});
  }else{
  //没有图片
  //数据
  var data = {
  x:x,//经度
  y:y,//维度
  cat_id:cat_id,//分类id
  cat_name:cat_name,//分类名称
  address:address,//地址
  title:title,//标题
  desc:desc,//简介
  content:content,//内容
  pics:pics,//图片字段,以','隔开多张图片
  price:price,//价格
  tags:tags,//标签 以','隔开多个
  add_time:add_time,//支持度
  support:support,//支持度 默认为0
  uid:uid//用户id 可匿名
  };
  food_preDao.insert(data, function (err, food) {
  if(err){
  res.json({err:100,content:'数据库错误'});
  }else{
  res.json({err:0,content:'发布成功!',data:food});
  }

  });
  }


  }
};


3.视图文件(我这里是/views/users/food_add.ejs)

<style>
  .upload_item{ width: 50px; height: 45px; overflow: hidden;border: 2px dashed #bfbfbf; float: left;margin-right: 10px;}
  .upload_item_add{  width: 50px; height: 45px; display: block; line-height: 42px; text-align: center; font-size: 30px; cursor: pointer;}
  .upload_input{ }
</style>
<script>
  var ADD = {
  upload_click:function(obj){
  $(obj).parent().children().eq(1).click();
  },
  upload_change:function(obj){
  var path;
  path=$(obj).val();  //C:Documents and Settingshud桌面AddFile.jpg
  var aa;
  aa=path.split('.');
  //alert(aa[aa.length-1]);  //jpg 结果

  var name;
  name=path.split('');
  var bb=name[name.length-1];
  //alert(bb.substr(0,bb.indexOf('.')));  //AddFile 结果

  $(obj).parent().children().eq(0).css('fontSize','12px');
  $(obj).parent().css('borderStyle','solid');
  $(obj).parent().children().eq(0).html(bb.substr(0,bb.indexOf('.')));
  if($(obj).parent().attr('index')==1){//新增
  var html = '<div class="upload_item" index="1"><span class="upload_item_add" onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" class="upload_input" onchange="ADD.upload_change(this)" /></div>';
  $('#upload_box').append(html);
  $(obj).parent().attr('index','0');
  }
  }
};
</script>
<form method="post" action="/add" enctype="multipart/form-data">
  <table>
  <tr>
  <td>经度:</td><td><input type="text" name="x" id="x" /></td>
  </tr>
  <tr>
  <td>维度:</td><td><input type="text" name="y" id="y" /></td>
  </tr>
  <tr>
  <td>分类:</td><td><select name="cat_id"><option value="1">分类1</option></select></td>
  </tr>
  <tr>
  <td>地址:</td><td><input type="text" name="address" id="address" /></td>
  </tr>
  <tr>
  <td>标题:</td><td><input type="text" name="title" id="title" /></td>
  </tr>
  <tr>
  <td>简介:</td><td><input type="text" name="desc" id="desc" /></td>
  </tr>
  <tr>
  <td>内容:</td><td><input type="text" name="content" id="content" /></td>
  </tr>
  <tr>
  <td>图片:</td><td id="upload_box"><div class="upload_item" index="0" style="display:none;"><span class="upload_item_add" onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" class="upload_input" onchange="ADD.upload_change(this)" /></div><div class="upload_item" index="1"><span class="upload_item_add" onclick="ADD.upload_click(this)">+</span><input type="file" name="pics" id="pics" class="upload_input" onchange="ADD.upload_change(this)" /></div></td>
  </tr>
  <tr>
  <td>价格:</td><td><input type="text" name="price" id="price" /></td>
  </tr>
  <tr>
  <td>标签:</td><td><input type="text" name="tags" id="tags" /></td>
  </tr>
  <tr>
  <td colspan="2"><input type="submit" value="提交" /></td>
  </tr>
  </table>
</form>


 

最新资讯
会员“买1得8”?蜻蜓FM遭集体投诉:骗人的

会员“买1得8”?蜻蜓FM

说好的买1个会员送8个其他App会员,买完以后发现并不是
松下回应“员工发‘918勿忘国耻’被警告”:将核查

松下回应“员工发‘91

松下电器(中国)有限公司微博回应称,针对近日松下员工发布
AMD:已获美国许可 向实体清单中某些公司供货

AMD:已获美国许可 向实

9月15日开始,美国的对华为禁令正式升级,台积电、高通、
中国探月工程副总设计师:嫦娥五号年底前发射

中国探月工程副总设计

预计今年底之前发射“嫦娥五号”,实现月球区域软着陆及
报告:全球科研城市北京排名第一 纽约第二

报告:全球科研城市北京

北京在全球科研城市中再次位列第一,第2至5位分别为纽约
量子通信重大进展:北京成功研制首台量子直接通信样机

量子通信重大进展:北京

实现了10公里光纤链路4kb/s通信速率的量子保密电话,推
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,