Angular에서 여러 H5 이미지를 업로드하는 방법

이번 글에서는 Angular를 사용하여 사진을 업로드하는 기능에 대해 설명하겠습니다. 개발 과정에서 많은 문제가 발생했고 마침내 해결되었습니다. 오늘은 Angular에서 H5에서 사진을 업로드하는 방법을 소개하겠습니다. 참고로 도움이 필요한 친구들

최근 프로젝트에서 Angle 아래 이미지 업로드 기능을 사용했는데, 그 과정에서 많은 문제가 발생했는데, 드디어 해결되었습니다

Angular 업로드 과정입니다. 또는 무언가를 각도로 변환한다는 점을 제외하면 일반적인 업로드와 유사합니다.

1.ng-file-select 명령에는 이 기능이 없습니다. 실제로는 변경 이벤트로 변환됩니다. 말할 것도 없이 코드

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

여기서 설명하자면 코드의 일부는 다른 사람의 코드(http://blog.csdn.net/zx007fack/article/details/41073601)를 기반으로 한 것이지만, 원본 코드를 사용하기 때문에 내용이 수정되었습니다. 그렇지 않은 경우 프런트엔드 압축 기능을 추가하는 것이 일반적입니다. 프런트엔드 압축의 경우 캔버스를 사용하기 때문에 reader.result를 사용하는 iOS의 이미지 너비와 높이가 입니다. 직접 0. 안드로이드에서는 괜찮습니다. 구체적인 이유는 base64.문제인지 확실하지 않기 때문에 파일을 직접 전달한 다음 기본 js 메서드를 사용하여 너비와 높이를 가져온 다음 Canvas를 사용하여 압축한 후 마지막으로 blob으로 변환하고 formData를 통해 배경으로 전달했습니다.

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

iOS에서 매번 선택되는 사진의 이름이 이미지라고 해서 여기에서 사진을 가공해서 이름에 일련번호를 추가했습니다. Safari의 버그입니다. 이후 버전에서만 해결될 예정이지만 당분간은 이 방법으로만 해결될 수 있습니다. 루프는 여러 장의 사진을 업로드하는 것입니다

3.html 코드

<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>

4. 그런데 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;
    });
  }

아이디어가 약간 혼란스럽습니다. 생각나면 추가하겠습니다. Bar

위 내용은 모두의 학습에 도움이 되기를 바랍니다. !

관련 권장사항:

H5 휴대폰 이미지 업로드 플러그인 코드

로컬 이미지를 업로드하고 미리보기 위한 H5 기능 코드

위 내용은 Angular에서 여러 H5 이미지를 업로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!