2017-11-19 16 views
0

내 사용자가 브라우저에서 이미지 파일을 포함하는 zip 파일을 선택하게하십시오. 그런 다음 zip 파일을 검사하고 원격 서버에 보낼 이미지 파일을 선택합니다 (처리 된 곳 등). zip 파일을로드하고 파일을 식별하는 데는 문제가 없습니다. 나는 파일을node.js의 zipfile에서 이미지 파일을 추출하고 서버에 파일을 업로드하십시오.

<input type="file"> 

엘리먼트로 선택한다; 나는 다음이 파일의 압축 파일을 식별

var zip = new JSZip(); 
    zip.loadAsync("file selected in browser") 

: 나는 우수한 JSZip 라이브러리를 사용하여 zip 파일로 읽어 JSZip으로,

for (var key in zip.files) { 
     var myFile=zip.files[key]; } 

지금을, 나는 각 압축 파일을 추출 할 수 있습니다 :

zip.files["key for this file"].async("base64").then(function (myImage) { 
     //send this image to a remote server as if it were a file 
    }); 

마지막 단계에 문제가 있습니다. 나는 이것이 올바르게 업로드되도록 호출, 매개 변수 등의 올바른 조합을 파악할 수 없습니다.

var fd = new FormData();     
    fd.append("file", myImage); 

를 다음 아약스 그것을 게시 : 그것은 formData 객체를 만들고 거기에서 그것을 보낼 수 있도록하기 위해 명백한 일 것 같다 그러나

$.ajax({ 
     type: 'POST', 
     url: url, 
     enctype: 'multipart/form-data', 
     contentType: false, 
     dataType: false, 
     processData: false, 
     data: fd, 
    }).done(function(data){ 
     //do something with returned data 
    }) 

을이 서버에서 작동하지 않습니다 끝내기 (양식에서 동일한 주소로 보내진 동일한 파일이 잘 작동 함에도 불구하고). 내가 뭘 놓치고 있니? 또는 $ .ajax (또는 npm http 모듈)로이 작업을 수행 할 수 없으며 npm 요청 모듈과 같이 더 낮은 수준의 것을 사용해야합니까?

도움말!

답변

0

좋아, 알아 냈어. 대부분 재판과 (대부분) 오류로,하지만 여기에 무슨 일이있다. 첫째, 당신은 그래서는 "덩어리"로 zip 파일에서 파일을 추출 할 수 있습니다

다음
zip.files["key for this file"].async("blob").then(function (myImage) { 
    //send this image to a remote server as if it were a file 
}); 

당신이 덩어리가있을 때 다음과 같이, 당신은 다른 덩어리에를 포함해야한다 :

var blob = new Blob([myImage], { type: "image/jpeg"}); 

그런 다음 새로운 FormData 객체를 만들고, 여기에 우리의 새 파일 방울을 추가

var fd = new FormData(); 
fd.append('file', blob, 'myFile.jpg'); 

을 그리고 그렇게, $ 아약스를 (당신이 jQuery를 사용하는 경우) 전화 :

$.ajax({ 
    type: 'POST', 
    url: url, 
    enctype: 'multipart/form-data', 
    contentType: false, 
    dataType: false, 
    processData: false, 
    data: fd, 
}) 
.done (function(data){ 
    //do something with the success 
}) 

그리고 완벽하게 작동합니다. 솔직히, 얼룩을 얼룩 지어내는 것은 정말 이상한 것처럼 보이지만 작동합니다.