欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular下H5上传图片的方法(可多张上传)

程序员文章站 2022-05-24 15:43:17
最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决 angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为ang...

最近做的项目中用到了angular下上传图片功能,在做的过程中遇到了许多问题,最终都得以解决

angular上传时和普通上传时过程差不多,只不过是要不一些东西转化为angular的东西。

1.ng-file-select,指令angular是没此功能的,其实也是转化成了change事件,不多说,直接上代码

angular.module('myapp')
.directive('ngfileselect', [ '$parse', '$timeout', function($parse, $timeout) {
    return function(scope, elem, attr) {
      var fn = $parse(attr['ngfileselect']);
      elem.bind('change', function(evt) {
        var files = [], filelist, i;
        filelist = evt.target.files;
        if (filelist != null) {
          for (i = 0; i < filelist.length; i++) {
            files.push(filelist.item(i));
          }
        }
        $timeout(function() {
          fn(scope, {
            $files : files,
            $event : evt
          });
        });
      });
    };
  }])

2.服务 上传文件前预览并压缩图片功能

//上传文件预览
angular.module('myservers',[])
  .factory('filereader', ['$q', '$log', function($q, $log) {
    var datauritoblob = function(datauri) { 
      // convert base64/urlencoded data component to raw binary data held in a string 
      var bytestring; 
      if (datauri.split(',')[0].indexof('base64') >= 0) 
        bytestring = atob(datauri.split(',')[1]); 
      else 
        bytestring = unescape(datauri.split(',')[1]); 
      // separate out the mime component 
      var mimestring = datauri.split(',')[0].split(':')[1].split(';')[0]; 
      // write the bytes of the string to a typed array 
      var ia = new uint8array(bytestring.length); 
      for (var i = 0; i < bytestring.length; i++) { 
        ia[i] = bytestring.charcodeat(i); 
      } 
      return new blob([ia], { 
        type: mimestring 
      }); 
    }; 
    var onload = function(reader, deferred, scope,file) {
      return function() {
        scope.$apply(function() {
           var img = new image();
          //前端压缩图片
          img.onload = function(){ 
            //resize the image using canvas 
            var canvas = document.createelement("canvas"); 
            var ctx = canvas.getcontext("2d"); 
            var width = img.width; 
            var height = img.height; 
            var max_width = width>2500 ? width/2 : 2500; 
            var max_height = height>2500 ? height/2 : 2500;
            if (width > height) { 
              if (width > max_width) { 
                height *= max_width / width; 
                width = max_width; 
              } 
            } else { 
              if (height > max_height) { 
                width *= max_height / height; 
                height = max_height; 
              } 
            }
            canvas.width = width ; 
            canvas.height = height; 
            ctx.drawimage(img, 0, 0, width, height); 
            var dataurl = canvas.todataurl('image/jpeg', 1);
            var blob = datauritoblob(dataurl); 
            if(blob.size > 2000 * 1024){
              dataurl = canvas.todataurl('image/jpeg', .2);
            }else if(blob.size > 1000 * 1024){
              dataurl = canvas.todataurl('image/jpeg', .5);
            }else{
              dataurl = canvas.todataurl('image/jpeg', .8);
            }
            blob = datauritoblob(dataurl);
            deferred.resolve(blob);
          }
          img.src = url.createobjecturl(file);
        });
      };
    };
    var onerror = function(reader, deferred, scope) {
      return function() {
        scope.$apply(function() {
          deferred.reject(reader.result);
        });
      };
    };
    var onprogress = function(reader, scope) {
      return function(event) {
        scope.$broadcast("fileprogress", {
          total: event.total,
          loaded: event.loaded
        });
      };
    };
    var getreader = function(deferred, scope, file) {
      var reader = new filereader();
      reader.onload = onload(reader, deferred, scope,file);
      reader.onerror = onerror(reader, deferred, scope);
      reader.onprogress = onprogress(reader, scope);
      return reader;
    };
    var readasdataurl = function(file, scope) {
      var deferred = $q.defer();
      var reader = getreader(deferred, scope,file);
      reader.readasdataurl(file);
      return deferred.promise;
    };
    return {
      readasdataurl: readasdataurl
    };
  }]);

这里说明一下,部分代码是参考别人的代码(),但是对其中内容做了修改,因为用原来的代码,如果不加前端压缩功能是正常的,前端压缩的话因为要用到canvas, 直接用reader.result在ios上图片的宽高拿到的直接是0,android上是可以的,具体原因不是很确定是不是base64的问题,所以我又直接把file传了进来,然后用原生js的方法新建图片元素拿到宽高,再用canvas进行压缩,最后转成blob,通过formdata传给后台。

3.controller代码

//选择图片后执行的方法
    $scope.filearr = [];
    $scope.imgsrcarr = [];var i = 0; //为ios上图片都为image时添加序号
    $rootscope.onfileselect = function(files, event) {
      //预览上传图片开始
      $rootscope.startloading();
      var $this = angular.element(event.target);
      angular.foreach(files, function(value, index) {
        var filein = value;
        var fileinname = filein.name;
        var filetype = fileinname.substring(fileinname.lastindexof(".") + 1, fileinname.length);
        //解决ios下所有图片都为image.jpg的bug
        if(filein) {
          fileinname = fileinname.split('.')[0] + i + '.' + filetype;
          i++;
        }
        attachvo.push({
          name: fileinname,
          type: filetype
        });
        filereader.readasdataurl(filein, $scope)
          .then(function(result) {
            result.name = fileinname;
            $scope.filearr.push(result);
            $scope.imgsrcarr.push(url.createobjecturl(result));
              //每次上传后清空file框,确保每次都能调用change事件
            document.queryselector('.upload').reset();
          });
        $scope.$on('fileprogress', function(event, data) {
          if(data.total == data.loaded) {
            $timeout(function() {
              //上传图片结束
              $rootscope.endloading();
            }, 200)
          }
        });      
      });
      $rootscope.showattachment = false;
    };return false;
    }

这里处理了下图片,在名字上加了序号,因为在ios上每次选择的图片名字都叫image,查找了很多资料,说是safari的bug,后面版本才会解决,暂时只能以这种方式解决了。循环是上传多张图片

3.html代码

<ul class="upload-view-ul">
    <li ng-repeat="src in imgsrcarr" class="pull-left" ng-click="delcurupload(src)" 
      ng-class="{'row-last': (($index+1) % 5==0)}">
      <span>x</span>
      <em ng-if='nrc'>{{formdata.attachvo[$index].attachmenttype}}</em>
      <img ng-src="{{src}}">
    </li>
    <div class="attachment" pop-type-select ng-if="nrc">+</div>
    <div class="attachment" ng-if="!nrc">
      +
      <form class="upload">
        <input type="file" name="file[]" ng-file-select="onfileselect($files, $event)" multiple>
      </form>
    </div>
  </ul>

4.顺便把formdata时代码贴一下,采用h5上传图片的方式

this.formdatapost = function(pathurl, formid, formdata, files) {
    var fd = new formdata();
    fd.append('formid', formid);
    if(files && angular.isarray(files)) {
      files.foreach(function(item) {
        fd.append('file', item, item.name);
      });
    }
    fd.append('formdata', angular.tojson(formdata, true));
    var httpconfig = {
      headers: {
        'authorization': 'bearer ' + this.token,
        'content-type': undefined
      },
      transformrequest: angular.identity
    };
    return $http.post(rooturl + pathurl, fd, httpconfig).then(function(data) {
      return data;
    }).catch(function(error) {
      $rootscope.interfacename = pathurl;
      $rootscope.setnewwortstatus({
        status: error.status,
        errinfo: error.data && error.data.statusinfo || ''
      });
      return error;
    });
  }

思路有一点混乱,不知道讲清楚了没有,想起来再添加吧

以上所述是小编给大家介绍的angular下h5上传图片的方法(可多张上传),希望对大家有所帮助