Angular で複数の H5 画像をアップロードする方法

この記事では、Angular を使用して写真をアップロードする機能について説明します。開発中に多くの問題に遭遇しましたが、今日は Angular で H5 に写真をアップロードする方法を紹介します (複数の写真をアップロードすることができます)。アップロードされました）、これは非常に良いです。困っている友達の参考にしてください

最近のプロジェクトで angular で画像をアップロードする機能が使用されましたが、その過程で多くの問題が発生しましたが、最終的には解決されました

。または何かを Angular に変換することを除いて、通常のアップロードと似ています。

1.ng-file-select、angular コマンドにはこの機能はありません。特に言うことはありません。サービスのプレビューと圧縮を行うだけです。ファイルをアップロードする前の画像関数

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
          });
        });
      });
    };
  }])

ここで説明させてください、コードの一部は他の人のコード (http://blog.csdn.net/zx007fack/article/details/41073601) に基づいていますが、元のコードを使用しているため、内容が変更されています。そうでない場合は、フロントエンド圧縮機能を追加するのが通常です。キャンバスを使用するため、iOS 上の画像の幅と高さは、reader.result を使用します。 Androidでは問題ありません。具体的な理由はbase64の問題かどうかは不明なので、ファイルを直接渡してから、ネイティブjsメソッドを使用して幅と高さを取得する新しいピクチャ要素を作成しました。 Canvas を使用して圧縮し、最終的に BLOB に変換して、formData を通じてバックグラウンドに渡しました。

3.コントローラーコード

//上传文件预览
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
    };
  }]);

iOSで毎回選択される画像の名前がimageというので、ここで画像を加工して名前に連番を付けました。色々調べたところ、 であることが分かりました。 Safari のバグです。これは今後のバージョンでのみ利用可能ですが、当面はこの方法でのみ解決できます。ループは、複数の写真をアップロードすることです

3.html コード

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

4. ちなみに、写真をアップロードする H5 メソッドを使用して、formdata コードを貼り付けます

<ul class="upload-view-ul">
    <li ng-repeat="src in imgSrcArr" class="pull-left" ng-click="delCurUpload(src)" 
      ng-class="{&#39;row-last&#39;: (($index+1) % 5==0)}">
      <span>x</span>
      <em ng-if=&#39;nrc&#39;>{{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>

このアイデアは少しわかりにくいです。思いついたら追加します

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 ！

関連する推奨事項:

H5 携帯電話画像アップロード プラグイン コード

ローカル画像をアップロードしてプレビューするための H5 関数コード

以上がAngular で複数の H5 画像をアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。