각도 업로드 이미지 및 사용자에게 표시

Question

사용자가 이미지를 선택하고 해당 이미지가 검토를 위해 즉시 표시되는 UI를 구현하고자합니다. 사용자는 자신의 프로필에 이미지를 업로드/저장하려면 "제출"을 클릭해야합니다.

"즉시 사용자 부분으로 다시 표시"하는 데 문제가 있습니다.

나는 다음과 같은 마크 업 & 컨트롤러 각도 FormData를 사용하고 있습니다 :

마크 업을

<input id="chooseFile" type="file" file-model="picFile" /> 

<img src="{{uploadedImage}}" /> <!-- this populates with filename but what is the path?? --> 

CONTROLLER

angular.element('#chooseFile').change(function(){ 

     var file = $scope.picFile; // this comes up "undefined" since file is still uploading when this is fired 

     $scope.uploadedImage = file.name; 

}); 

나는 위의 코드와 2 차 문제가 (com ments)은 : 아무리 작은 파일이 콜백은 거의 순간적으로 발사되는 동안 업로드> 0이 걸리기 때문에 컨트롤러에서

1), file 분명히 최대 undefined 온다. 나는 $timeout을 사용하여 작동 시키지만 약간의 절름발이 해킹이있다. 파일이 업로드 될 때까지 콜백을 대기 시키려면 어떻게해야합니까 ??

2) 아이디어는 파일을 업로드하고 Angular의 데이터 바인딩을 사용하여 img 태그에 표시하는 것입니다. 이것은 src이 파일 이름으로 채워지지만, img의 경로는 무엇입니까?에서 작동합니다. 캐시 또는 무언가의 일부 임시 위치 ?? 분명히 나는 ​​파일을 옮길 경로를 아직 세우지 않았다.

도움을 주셨습니다.

Answer 1

이 기능이 필요했는데, 이미지를 즉시 표시하는 방법이 필요했습니다. 내가 laravel + Angularjs을 사용했다

angular.module('HelloWorldApp', []) 
 
    .controller('HelloWorldController', function($scope) { 
 
     $scope.uploadavtar = function(files) { 
 
     //var fd = new FormData(); 
 
     //Take the first selected file 
 
     //fd.append("file", files[0]); 
 
     
 
     var imagefile = document.querySelector('#file'); 
 
       if (imagefile.files && imagefile.files[0]) { 
 
        var reader = new FileReader(); 
 
        reader.onload = function (e) { 
 
         $('#temp_image') 
 
          .attr('src', e.target.result); 
 
        }; 
 
        reader.readAsDataURL(imagefile.files[0]); 
 
        this.imagefile = imagefile.files[0]; 
 
       }else{ 
 
        console.log("Image not selected"); 
 
       } 
 
     
 
     
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="HelloWorldApp"> 
 
    <div ng-controller="HelloWorldController"> 
 
     <input type="file" id="file" onchange="angular.element(this).scope().uploadavtar(this.files)"/> 
 
    </div> 
 
     <img src="" id="temp_image" width="100"> 
 
    <div> 
 
    </div> 
 
</div>

때문에 매장 이미지에 또 다른 관련 게시물은 다음과 같습니다 https://stackoverflow.com/a/34830307/2815635