Nodejs+angularjs结合multiparty实现多图片上传的示例代码


Posted in NodeJs onSeptember 29, 2017

这次我们说一下nodejs+angularjs多图片上传的问题

此前也在网站看了很多篇文章,有关的内容说多不多,说少也不少,但我一一试过以后有成功的,也有没有成功的,折磨了我很长时间,最终也是成功实现了,于是想写下这篇文章,分享我的代码,也希望后人不要踏进我的坑。

首先说一下nodejs所以依赖的插件 multiparty 和 fs,可以用npm工具来安装

npm install multiparty --save 
npm install fs --save

先贴出我nodejs的后台代码(注意:我的后台代码是写在路由中的)

const express = require('express')
const multiparty = require('multiparty');
const fs = require('fs');
const router = express.Router();

router.post('/uploadImg', function (req, res,next) {

 //生成multiparty对象,并配置上传目标路径
 var form = new multiparty.Form({
 uploadDir: './public/uploads/',//路径需要对应自己的项目更改
 /*设置文件保存路径 */
 encoding: 'utf-8',
 /*编码设置 */
 maxFilesSize: 20000 * 1024 * 1024,
 /*设置文件最大值 20MB */
 keepExtensions: true,
 /*保留后缀*/
 });
 
 //上传处理
 form.parse(req, function(err, fields, files) {
  var filesTmp = JSON.stringify(files, null, 2);
  console.log(files);
  
  function isType(str) {
   if (str.indexOf('.') == -1) {
    return '-1';
   } else {
    var arr = str.split('.');
    return arr.pop();
   }
  }
  
  if (err) {
   console.log('parse error: ' + err);
  } else {
  var inputFile = files.image[0];
  var uploadedPath = inputFile.path;
  var type = isType(inputFile.originalFilename);
  /*var dstPath = './public/files/' + inputFile.originalFilename;//真实文件名*/
  var name = new Date().getTime() + '.' + type; /*以上传的时间戳命名*/
  var dstPath = './public/uploads/' + name; /*路径需要对应自己的项目更改*/
  console.log("type---------" + type);
  
  if (type == "jpg" || type == "png" || type == "exe") {
   console.log('可以上传');
   //重命名为真实文件名
   fs.rename(uploadedPath, dstPath, function(err) {
    if (err) {
     console.log('rename error: ' + err);
    } else {
     console.log('上传成功');
    }
   });
   res.writeHead(200, { 'content-type': 'text/plain;charset=utf-8' });
   var data = { "code": "1",'result_code':'SUCCESS', "msg": "上传成功", "results": [{ "name": name, "path": "uploads/" + name }] };
   console.log(JSON.stringify(data))
   res.end(JSON.stringify(data));
   
   } else {
    fs.unlink(uploadedPath, function(err) {
    if (err) {
    return console.error(err);
    }
    console.log("文件删除成功!");
    });
    
    console.log('不能上传' + inputFile.originalFilename);
    res.writeHead(200, { 'content-type': 'text/plain;charset=utf-8' });
    var data = { "code": 0, "msg": "上传失败" };
    res.end(JSON.stringify(data));
   
   }
  }
  
 });

});

然后是angularjs的控制器代码

appIndex.controller('createImgs',function($rootScope,$scope,$http){
  // 图片上传

  $scope.reader = new FileReader();  //创建一个FileReader接口
  $scope.form = {   //用于绑定提交内容,图片或其他数据
    image:{},
  };
  $scope.thumb = {};   //用于存放图片的base64
  $scope.thumb_default = {  //用于循环默认的‘加号'添加图片的框
    1111:{}
  };

  $scope.img_upload = function(files) {    //单次提交图片的函数
    $scope.guid = (new Date()).valueOf();  //通过时间戳创建一个随机数,作为键名使用
    $scope.reader.readAsDataURL(files[0]); //FileReader的方法,把图片转成base64
    $scope.reader.onload = function(ev) {
      $scope.$apply(function(){
        $scope.thumb[$scope.guid] = {
          imgSrc : ev.target.result, //接收base64
        }
      });
    };
    
    var data = new FormData();   //以下为像后台提交图片数据
    data.append('image', files[0]);
    data.append('guid',$scope.guid);
    $http({
      method: 'post',
      url: '/uploadImg',
      data:data,
      headers: {'Content-Type': undefined},
      transformRequest: angular.identity
    }).then(function successCallBack(response) {
      if (response.data.result_code == 'SUCCESS') {
        $scope.form.image[$scope.guid] = response.data.results[0].path;
        $scope.thumb[$scope.guid].status = 'SUCCESS';
        console.log($scope.form)
      }
      if(data.result_code == 'FAIL'){
        console.log(data)
      }
    }, function errorCallback(response) {
      console.log('网络错误')
    })
  };

  $scope.img_del = function(key) {  //删除,删除的时候thumb和form里面的图片数据都要删除,避免提交不必要的
    var guidArr = [];
    for(var p in $scope.thumb){
      guidArr.push(p);
    }
    delete $scope.thumb[guidArr[key]];
    delete $scope.form.image[guidArr[key]];
  };
  $scope.submit_form = function(){  //图片选择完毕后的提交,这个提交并没有提交前面的图片数据,只是提交用户操作完毕后,到底要上传哪些,通过提交键名或者链接,后台来判断最终用户的选择,整个思路也是如此
    $http({
      method: 'post',
      url: '/insertImg',
      data:$scope.form,
    }).success(function(data) {
      console.log(data);  
    })
  };
 
 })

最后是html代码

<div class="col-md-12 col-lg-7 fill">
  <div class="form-group">
    <h4>图片</h4>
    <p>支持批量上传,支持照片的格式为<span class="label label-default">jpg & png</span> 。每张照片请不要超过<span class="label label-default">50M</span> 。为了在全屏下获得最好的效果,照片的分辨率最好大于<span class="label label-default">1920 x 1280</span> 。上传后的照片默认会按照它们的EXIF日期来排序。</p>
    <div ng-repeat="item in thumb_default">
      <!-- 这里之所以写个循环,是为了后期万一需要多个‘加号'框 -->
      <label for="one-input">
        <div class="add">
          <span></span>
          <span></span>
        </div>
      </label>
      <input type="file" id="one-input" accept="image/*" file-model="images" onchange="angular.element(this).scope().img_upload(this.files)"/>
    </div>
  </div>
  <div class="hr-text hr-text-left m-b-1 m-t-1">
    <h6 class="text-white">
      <strong>已上传</strong>
    </h6>
  </div>
  <div ng-repeat="item in thumb" class="imgload">
  <!-- 采用angular循环的方式,对存入thumb的图片进行展示 -->
    <label>
      ![]({{item.imgSrc}})
    </label>
    <div class="imgDel">
      <span ng-if="item.imgSrc" ng-click="img_del($index)" class="glyphicon glyphicon-remove"></span>
    </div>
    
  </div>
  
</div>

添加css样式以便页面更加合理美观

.fill .form-group label .add{
  border:1px solid #666;
  width: 100px;
  height: 100px;
  position: relative;
  cursor: pointer;
}
.fill .form-group label .add span:nth-of-type(1){
  width: 2px;
  height: 50px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -25px;
  margin-left: -1px;
  background: #666;
}
.fill .form-group label .add span:nth-of-type(2){
  background: #666;
  width: 50px;
  height: 2px;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -1px;
  margin-left: -25px;
}
.fill .form-group input{
  display: none;
}
.fill .imgload{
  display: inline-block;
  margin: 7px;
  position: relative;
}
.fill .imgload label img{
  width: 200px;
  height: 200px;
}
.fill .imgload .imgDel{
  width:20px;
  height: 20px;
  background: #666;
  border-radius: 50%;
  position: absolute;
  right: -10px;
  top: -10px;
  color: #ccc;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}

注:整体页面采用bootstrap框架布局

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs进阶:express+session实现简易登录身份认证
Apr 24 NodeJs
win系统下nodejs环境安装配置
May 04 NodeJs
NodeJS链接MySql数据库的操作方法
Jun 27 NodeJs
Nodejs模块载入运行原理
Feb 23 NodeJs
nodejs实现解析xml字符串为对象的方法示例
Mar 14 NodeJs
nodejs 简单实现动态html的方法
May 12 NodeJs
NodeJS 中Stream 的基本使用
Jul 30 NodeJs
基于nodejs的雪碧图制作工具的示例代码
Nov 05 NodeJs
详解NodeJS Https HSM双向认证实现
Mar 12 NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 NodeJs
Nodejs实现文件上传的示例代码
Sep 26 #NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 #NodeJs
使用vs code开发Nodejs程序的使用方法
Sep 21 #NodeJs
详解使用vscode+es6写nodejs服务端调试配置
Sep 21 #NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 #NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 #NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 #NodeJs
You might like
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
ThinkPHP路由机制简介
2016/03/23 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
详解vue+vuex+koa2开发环境搭建及示例开发
2018/01/22 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python字典改变value值方法总结
2019/06/21 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
应用艺术专业个人的自我评价
2014/01/03 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
学历证明样本
2015/06/16 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL
html实现弹窗的实例
2021/06/09 HTML / CSS
Python中的嵌套循环详情
2022/03/23 Python