Angular.js HTML5를 나는이에서 삭제 된 파일을하고 싶은 Grails의 컨트롤러

에 파일 업로드 HTML5가 JSFiddle에서 예를 업로드 AngularJS와 : Grails의 컨트롤러에 의해 백엔드에 업로드Angular.js HTML5를 나는이에서 삭제 된 파일을하고 싶은 Grails의 컨트롤러

http://jsfiddle.net/danielzen/utp7j/

. 이 내가 간단한 Grails의 컨트롤러 생성 달성하기 위해 노력하고 있지만 : 나는 Grails의 컨트롤러에 아약스 XMLHttpRequest2의 POST를 엽니 다

class UploadController { 

    def index() { 

     if (request instanceof MultipartHttpServletRequest){ 
      for(filename in request.getFileNames()){ 
       MultipartFile file = request.getFile(filename) 
       String newFileName = UUID.randomUUID().toString() + file.originalFilename.substring(file.originalFilename.lastIndexOf(".")) 
       file.transferTo(new File("/home/myuser/temp/$newFileName")) 
      } 
     } 

     render "ok" 
    } 

}

을 :

xhr.open("POST", "http://localhost:8080/app/upload")

하지만 Grails의 컨트롤러가 MultipartHttpServletRequest를에 요청을 캐스팅 할 수없는, 아마 grails 컨트롤러를 호출하는이 아약스 방식이 multipart/form-data 업로드 방법을 사용하고 있지 않기 때문일 것입니다. enctype multipart/form-data의 xhr 헤더를 사용하지 않으려 고 시도했습니다.

나는 순간에 완전히 붙어있어 내가 바이올린에서 업로드를 할 때 당신이 얻을 네트워크에서 들여다 촬영 Grails의 컨트롤러

출처

2013-10-14 nkr1pt

'params' 안에 무엇이 있습니까? –

내장 된 Chrome 개발자 도구를 사용하여 XmlHttpRequest.send (formData) 호출에 의해 생성 된 POST 요청을 추적했습니다. 놀랍게도 요청 방법은 enctype = multipart/form-data와 함께 POST 유형이 아니라 OPTIONS 유형입니다.

이 힌트는 올바른 길로 인도 해 주었고 Google의 도움을 받아이 OPTIONS 요청이 CORS에서 정의한 스펙 별 프리 플라이트 확인으로 발생한다는 것을 알았습니다.

wikipdia에서

:. 크로스 원산지 자원 공유 (CORS)는 웹 페이지에 자바 스크립트가 다른 도메인으로, 하지 도메인 자바 스크립트에서 유래 대한 XMLHttpRequests를 만들 수있는 메커니즘이

[1 ] 이러한 "교차 도메인" 요청은 웹 브라우저에서 동일한 출처 보안 정책에 따라 금지됩니다. CORS는 브라우저와 서버가 상호 작용하여 출처 교차 요청을 허용할지 여부를 결정하는 방법을 정의합니다. [2] 동일한 출처 요청 만 허용하는 것보다 더 강력하지만 모든 출처를 교차 출처 요청과 같은 모든 을 허용하는 것보다 안전합니다.

CORS 표준은 서버 이 허용 된 원본 도메인에 리소스를 제공 할 수있게하는 새로운 HTTP 헤더를 추가하여 작동합니다. 브라우저는 이러한 헤더를 지원하고 그들이 설정하는 제한 사항을 시행합니다.또한 사용자 데이터에 부작용을 일으킬 수있는 HTTP 요청 방법 (특히 , GET 이외의 HTTP 메서드 또는 특정 MIME 형식의 POST 사용)에 대해서는 브라우저에서 요청을 "미리 채우기" HTTP OPTIONS 요청 헤더를 사용하여 서버에서 지원되는 방법을 요청한 다음 메서드를 사용하여 실제 요청을 보내 서버 에서 "승인"하면됩니다. 서버는 요청으로 "자격 증명" (쿠키 및 HTTP 인증 데이터 포함)을 보내야하는지 여부를 클라이언트에 알릴 수도 있습니다.

내 Grails의이 (바람둥이) 서버가 로컬 호스트에서 실행 되었기 때문에 : 8080 내 HTML/자바 스크립트에 WebStorm IDE 내에서 실행중인 내장 된 로컬 호스트 HTTP 서버 : 63342, XMLHttpRequest의은 CORS가 있기 때문에, 효율적이었다 동일한 호스트의 다른 포트 번호도 교차 원점으로 간주됩니다.

따라서, 나는 Grails의 (바람둥이) 서버가이 허용 있는지 확인하기 위해 필요한, 내가 요청했다 후 https://github.com/davidtinker/grails-cors

에서 찾을 수 있습니다 Grails에 대한 우수한 고르 플러그인이 작업을 수행 할 수 있었다 MultipartHttpServletRequest으로 인식되어 파일을 가져올 수 있습니다. params

출처

2013-10-16 16:57:52 nkr1pt

에 업로드 된 파일을 처리 할 수있는 방법을 알고 싶습니다

------WebKitFormBoundarygZi30fqQLB2A9qAC 
Content-Disposition: form-data; name="uploadedFile"; filename="file.txt" 
Content-Type: text/javascript 


------WebKitFormBoundarygZi30fqQLB2A9qAC--

는 당신이 Grails의에 PARAM 키와 같은 "uploadedFile"을 얻을 것이다 다음 생각, 그래서 당신은 같은 컨트롤러 액션 작성할 수

def uploadFile(CommonsMultipartFile uploadedFile) { 
    ///accessing the file data: uploadedFile.bytes, uploadedFile.contentType, uploadedFile.originalFilename 
}

것은 확실하게 무엇 이 매개 변수가 전달되는 params 맵에서 디버그를 수행하고 그에 따라 조치 메소드 매개 변수 이름을 변경합니다.

출처

2013-10-16 01:39:42 Steve

그게 당연한 일이지만, XmlHttpRequest를 사용한 CORS (Cross-Origin Resource Sharing) 때문에 문제가 발생했습니다. 자세한 내용은 내 대답을 참조하십시오. – nkr1pt

<body ng-controller="FileUploadCtrl"> 
$scope.selectedFile=[]; 
         $scope.onFileSelect = function ($files) { 
          $scope.uploadProgress = 0; 
          $scope.selectedFile = $files; 
         }; 
         $scope.myData = {}; 

         $scope.upload = function(){ 
          var formData = new FormData(); 
          formData.append("file", $scope.selectedFile[0]); 
          formData.append("data", myData.message.value); 
          $http.post('api/upload', formData, { 
           transformRequest: angular.identity, 
           headers: { 
            'enctype': 'multipart/form-data', 
            'Content-Type': undefined 
           } 
          }) 
          .success(function(){ 
           alert("done"); 
          }) 
          .error(function(){ 
           alert("failed"); 
        }); 


</body> 

<form ng-submit="upload()" method="post" enctype="multipart/form-data" name="myData">  <div> 

    <textarea rows="3" name="message" placeholder="Send Message"></textarea>    
      <input type="file" ng-file-select="onFileSelect($files)" /> 
     </div> 
     <button type="submit" class="btn btn-primary">upload</button> 
     </form>

출처

2014-10-24 11:23:04

Angular.js HTML5를 나는이에서 삭제 된 파일을하고 싶은 Grails의 컨트롤러

답변

관련 문제