이미지 파일을 양식 데이터에 추가 - Cordova/Angular

이미지 파일을 양식 데이터에 추가 - Cordova/Angular

현재 진행 중인 프로젝트에서 아누글라, 아이오닉, 코르도바를 사용하고 있으며, 이미지 파일이 포함된 FormData를 서버에 게시하려고 합니다.지금 저는 cordova camera plugin을 사용하여 장치의 이미지(ex: file://path/to/img)에 파일 경로를 반환하고 있습니다.파일 경로가 있으면 이미지 파일 경로를 사용하여 FormData 개체에 이미지 파일을 추가합니다.여기 제 코드가 있습니다.

var fd = new FormData();

fd.append('attachment', file);
fd.append('uuid', uuid);
fd.append('userRoleId', userRole);

위의 코드는 파일을 첨부할 때 작동합니다.<input type='file'>장치에 파일 경로만 주어져도 작동하지 않습니다.

기본적으로 FormData는 현재 다음과 같이 표시됩니다.

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; 

file://path/to/img

이렇게 생겼으면 좋겠어요

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; filename="jesus-quintana.jpg"
Content-Type: image/jpeg

저는 cordova FileTransfer를 사용하여 이미지를 업로드하고 base64로 변환하여 업로드하는 여러 가지 방법을 찾았습니다.하지만 저는 경로를 이용해서 양식 안에 파일을 올리는 간단한 방법을 찾을 수 없었습니다.저는 파일 API에 대해 잘 모르니 어떤 도움이라도 주시면 감사하겠습니다.

약간의 고민 끝에 저는 꽤 간단한 해결책을 알아냈습니다.먼저 cordova file plugin을 추가하고 아래 코드를 사용합니다.

var fd = new FormData();
     window.resolveLocalFileSystemURL(attachment.img, function(fileEntry) {
         fileEntry.file(function(file) {
             var reader = new FileReader();
                 reader.onloadend = function(e) {
                      var imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                      fd.append('attachment', imgBlob);
                      fd.append('uuid', attachment.uuid);
                      fd.append('userRoleId', 12345);
                      console.log(fd);
                      //post form call here
                 };
                 reader.readAsArrayBuffer(file);

         }, function(e){$scope.errorHandler(e)});
    }, function(e){$scope.errorHandler(e)});

그래서 양식을 만들고 FileReader를 사용하여 ArrayBuffer를 Blob 개체에 삽입한 다음 양식 데이터에 추가하는 것입니다.이것이 이것을 할 수 있는 쉬운 방법을 찾는 다른 사람에게 도움이 되기를 바랍니다.

파일 내용을 보내야 합니다.HTML5 파일로FileReader 개체를 만드는 데 필요한 API입니다.

얼마 전 cordova로 어플리케이션을 개발해서 파일을 몇 개 읽어야 했고, CoFS라는 라이브러리를 만들었습니다(처음에는 cordova Filesystem에서 개발했는데 일부 브라우저에서 작동합니다).

베타 상태이지만 저는 잘 쓰고 잘 작동합니다.다음과 같은 작업을 수행할 수 있습니다.

var errHandler = function (err) {
   console.log("Error getting picture.", err);
};

var sendPicture = function (file) {

    var fs = new CoFS();

    fs.readFile(file, function (err, data) {

        if (err) {
            return errHandler(err);
        }

        var fd = new FormData();

        fd.append('attachment', new Blob(data));
        fd.append('uuid', uuid);
        fd.append('userRoleId', userRole);

        console.log("Data of file:" + data.toString('base64'));
        // Send fd...

    });

};

navigator.camera.getPicture(sendPicture, errHandler);

영어가 서툴러서 미안합니다.

당신의 게시물은 제 문제를 해결하는 데 큰 도움이 되었습니다.Ionic 4를 사용하고 있으며 표준 http와 file client를 사용하여 이미지를 업로드하려고 합니다.참고용 키 코드는 다음과 같습니다.

return this.file.readAsArrayBuffer(path, file).
  then(blob => {
    const imgBlob = new Blob([blob], { type: 'image/jpeg' } );

    formData.append('image[file]', imgBlob);

    return this.http.post(url, formData, headers).subscribe();
});

나처럼 누군가에게 도움이 되길 바랍니다.

언급URL : https://stackoverflow.com/questions/28843883/append-image-file-to-form-data-cordova-angular