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

时间2024-01-23 12:18:17发布访客分类HTML浏览628

导读：收集整理的这篇文章主要介绍了Angular下H5多张上传图片的方法，觉得挺不错的，现在分享给大家，也给大家做个参考。本文给大家分享在使用Angular上传图片的功能，在开发过程中遇到很多问题，最终都解决了，今天小编给大家介绍下Angular...

收集整理的这篇文章主要介绍了Angular下H5多张上传图片的方法，觉得挺不错的，现在分享给大家，也给大家做个参考。本文给大家分享在使用Angular上传图片的功能，在开发过程中遇到很多问题，最终都解决了，今天小编给大家介绍下Angular下H5上传图片的方法（可多张上传),非常不错，需要的朋友参考下

最近做的项目中用到了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    }
    ;
  }
    ]);

这里说明一下，部分代码是参考别人的代码（http://blog.csdn.net/zx007fack/article/details/41073601），但是对其中内容做了修改，因为用原来的代码，如果不加前端压缩功能是正常的，前端压缩的话因为要用到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>
        p class="attachment" pop-type-select ng-if="nrc">
    +/p>
        p class="attachment" ng-if="!nrc">
          +      form class="upload">
            input type="file" name="file[]" ng-file-select="onFileSelect($files, $event)" multiple>
          /form>
        /p>
      /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;
    }
    );
  }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！