zl程序教程

您现在的位置是:首页 >  后端

当前栏目

node.js实现多图片上传实例

JS实例上传Node 实现 图片
2023-06-13 09:15:27 时间

先上效果图:

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

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

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

复制代码代码如下:

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

2.路由控制器文件(我这里是/routes/users.js)
复制代码代码如下:

//添加美食
exports.add=function(req,res){
  if(req.method=="GET"){
       varuser={};
    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"){
   //获取数据
   varx=req.body.x;
   vary=req.body.y;
   varcat_id=req.body.cat_id;
   varcat_name=req.body.cat_name;
   varaddress=req.body.address;
   vartitle=req.body.title;
   vardesc=req.body.desc;
   varcontent=req.body.content;
   varpics="";
   varprice=req.body.price;
   vartags=req.body.tags;
   varadd_time=Date.parse(newDate())/1000;
   varsupport=0;
   varuid=req.body.uid;

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

   varfile_obj=req.files.pics;
   //console.log(file_obj.length);
   varfile_obj2=[];
   for(vari=0;i<file_obj.length;i++){
       if(file_obj[i].name){
           file_obj2.push(file_obj[i]);
       }
   }
   varlength=file_obj2.length;
   if(length>0){
       file_obj2.forEach(function(item,index){
           if(item.path){
           vartmpPath=item.path;
           vartype=item.type;
           varextension_name="";
           //移动到指定的目录,一般放到public的images文件下面
           //在移动的时候确定路径已经存在,否则会报错
           vartmp_name=(Date.parse(newDate())/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;
           }
           vartmp_name=tmp_name+"."+extension_name;
           vartargetPath="public/images/"+tmp_name;
           console.log(tmpPath);
           //将上传的临时文件移动到指定的目录下
           fs.rename(tmpPath,targetPath,function(err){
               if(err){
                   throwerr;
               }
               if(pics){
                   pics+=","+tmp_name;
               }else{
                   pics+=tmp_name;
               }
               //判断是否完成
               //console.log(index);
                //删除临时文件
               fs.unlink(tmpPath,function(){
                   if(err){
                       throwerr;
                   }else{
                       if((index+1)==length){
                   console.log(targetPath);
                   //上传处理完成
                   //数据
                   vardata={
                       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{
       //没有图片
       //数据
       vardata={
           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:2pxdashed#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>
   varADD={
       upload_click:function(obj){
           $(obj).parent().children().eq(1).click();
       },
       upload_change:function(obj){
           varpath;
           path=$(obj).val();     //C:\DocumentsandSettings\hud\桌面\AddFile.jpg
           varaa;
           aa=path.split(".");
           //alert(aa[aa.length-1]); //jpg结果

           varname;
           name=path.split("\\");
           varbb=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){//新增
               varhtml="<divclass="upload_item"index="1"><spanclass="upload_item_add"onclick="ADD.upload_click(this)">+</span><inputtype="file"name="pics"id="pics"class="upload_input"onchange="ADD.upload_change(this)"/></div>";
               $("#upload_box").append(html);
               $(obj).parent().attr("index","0");
           }
       }
    };
</script>
<formmethod="post"action="/add"enctype="multipart/form-data">
   <table>
       <tr>
           <td>经度:</td><td><inputtype="text"name="x"id="x"/></td>
       </tr>
       <tr>
           <td>维度:</td><td><inputtype="text"name="y"id="y"/></td>
       </tr>
       <tr>
           <td>分类:</td><td><selectname="cat_id"><optionvalue="1">分类1</option></select></td>
       </tr>
       <tr>
           <td>地址:</td><td><inputtype="text"name="address"id="address"/></td>
       </tr>
       <tr>
           <td>标题:</td><td><inputtype="text"name="title"id="title"/></td>
       </tr>
       <tr>
           <td>简介:</td><td><inputtype="text"name="desc"id="desc"/></td>
       </tr>
       <tr>
           <td>内容:</td><td><inputtype="text"name="content"id="content"/></td>
       </tr>
       <tr>
           <td>图片:</td><tdid="upload_box"><divclass="upload_item"index="0"style="display:none;"><spanclass="upload_item_add"onclick="ADD.upload_click(this)">+</span><inputtype="file"name="pics"id="pics"class="upload_input"onchange="ADD.upload_change(this)"/></div><divclass="upload_item"index="1"><spanclass="upload_item_add"onclick="ADD.upload_click(this)">+</span><inputtype="file"name="pics"id="pics"class="upload_input"onchange="ADD.upload_change(this)"/></div></td>
       </tr>
       <tr>
           <td>价格:</td><td><inputtype="text"name="price"id="price"/></td>
       </tr>
       <tr>
           <td>标签:</td><td><inputtype="text"name="tags"id="tags"/></td>
       </tr>
       <tr>
           <tdcolspan="2"><inputtype="submit"value="提交"/></td>
       </tr>
   </table>
</form>