So laden Sie mehrere H5-Bilder in Angular hoch

In diesem Artikel wird die Funktion zum Hochladen von Bildern mit Angular vorgestellt. Während des Entwicklungsprozesses sind viele Probleme aufgetreten, die schließlich gelöst wurden. Heute werde ich Ihnen die Methode zum Hochladen von Bildern in H5 unter Angular vorstellen hochgeladen werden). Sehr gut, Freunde, die es brauchen, können darauf verweisen

In einem aktuellen Projekt habe ich die Bild-Upload-Funktion in Angular verwendet und bin dabei auf viele Probleme gestoßen, die schließlich gelöst wurden

Beim Hochladen in Angular Der Vorgang ähnelt dem normalen Upload-Vorgang, außer dass einige Dinge in Angular-Dinge konvertiert werden müssen.

1.ng-file-select, der Befehl Angular hat diese Funktion nicht, er wird tatsächlich in ein Änderungsereignis umgewandelt. Es gibt nicht viel zu sagen, gehen Sie einfach zum Code

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 . Bevor der Dienst die Funktion „Vorschau und Komprimierung der Datei“ hochlädt

//上传文件预览
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(&#39;image/jpeg&#39;, 1);
            var blob = dataURItoBlob(dataURL); 
            if(blob.size > 2000 * 1024){
              dataURL = canvas.toDataURL(&#39;image/jpeg&#39;, .2);
            }else if(blob.size > 1000 * 1024){
              dataURL = canvas.toDataURL(&#39;image/jpeg&#39;, .5);
            }else{
              dataURL = canvas.toDataURL(&#39;image/jpeg&#39;, .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
    };
  }]);

Lassen Sie mich hier erklären, dass ein Teil des Codes auf dem Code anderer Leute basiert (http://blog. csdn.net/zx007fack/article/details/41073601 ), aber der Inhalt wurde geändert, da es beim Originalcode normal ist, wenn die Front-End-Komprimierungsfunktion nicht hinzugefügt wird, da Canvas verwendet wird Sie können „reader.result“ direkt verwenden, um die Breite und Höhe des Bildes unter iOS zu ermitteln. Dies ist unter Android möglich. Der spezifische Grund ist nicht sicher, ob es sich um ein Problem mit base64 handelt, daher habe ich das direkt übergeben Datei ein, erstellte dann mit der nativen js-Methode ein neues Bildelement, um die Breite und Höhe zu ermitteln, und komprimierte es dann mit Canvas. Anschließend wurde es in einen Blob konvertiert und über formData an den Hintergrund übergeben.

3.Controller-Code

//选择图片后执行的方法
    $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;
    }

Ich habe das Bild hier verarbeitet und dem Namen eine Seriennummer hinzugefügt, da der Name des Bildes, das jedes Mal auf iOS ausgewählt wird, Bild heißt. Ich habe viel gesucht der Informationen und sagte, dass es sich um einen Safari-Fehler handelt, der in späteren Versionen behoben wird, sodass er vorerst nur auf diese Weise behoben werden kann. Die Schleife besteht darin, mehrere Bilder hochzuladen Die Idee ist etwas verwirrend, ich weiß nicht, ob ich es klar ausgedrückt habe, ich werde es hinzufügen, wenn ich darüber nachdenke

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er hilfreich sein wird Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

H5-Plugin-Code zum Hochladen von Mobiltelefonbildern

H5 implementiert die Funktion zum Hochladen lokaler Bilder und Vorschau des Codes

Das obige ist der detaillierte Inhalt vonSo laden Sie mehrere H5-Bilder in Angular hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!