폼데이터를 사용한 JavaScript Blob 업로드

폼데이터를 사용한 JavaScript Blob 업로드

javascript로 작성된 blob을 서버에 업로드하는 데 문제가 있습니다.기본 개념은 사용자가 이미지를 업로드하고 Javascript에서 이미지를 중앙으로 잘라내 다운샘플링한 후 전송하는 것입니다.

이미지 조작은 정상적으로 동작하고 있습니다만, 업로드 자체는 정상적으로 동작하고 있지 않습니다.다음은 캔버스에서 BLOB로 업로드 및 변환하는 코드입니다.

function uploadCanvasData()
{
    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");

    var blob = dataURItoBlob(dataUrl);

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

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);
}

function dataURItoBlob(dataURI)
{
    var byteString = atob(dataURI.split(',')[1]);

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab], { "type": mimeString });
    return bb;
}

서버는 파일이 업로드되지 않았다고 주장하며 Chrome을 사용하여 요청을 검사하면 요청 페이로드가 다음과 같이 표시됩니다.

------WebKitFormBoundaryyzYbm61DKgS09tpB
Content-Disposition: form-data; name="file"

[object FormData]
------WebKitFormBoundaryyzYbm61DKgS09tpB--

와 함께 제출되는 폼의 페이로드와는 대조적으로input type="file"

------WebKitFormBoundaryUOn3WXb7pKLmOxRZ
Content-Disposition: form-data; name="imagefile"; filename="-3YQHiVaGWo.jpg"
Content-Type: image/jpeg


------WebKitFormBoundaryUOn3WXb7pKLmOxRZ--

따라서 XMLHttpRequest가 호출 결과를 업로드하고 있는 것처럼 보입니다.blob.toString()

내가 여기서 뭘 잘못하고 있는지 아는 사람 있어?더 좋은 방법이 있을까요?

함수에 오타가 있습니다.uploadCanvasData읽혀질 것이다

formData.append("file", blob);

코드를 더 주의 깊게 읽어보세요!

function dataURItoBlob(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});
}

xmlhttpRequest 작성

let uriPost   ="active.php";
let xhrPost   =new XMLHttpRequest();

그럼 쉽게 해

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

이 모든 것을 당신이 스스로 만드는 기능에서 하고 그것을 기능이라고 부르길 바랍니다.

언급URL : https://stackoverflow.com/questions/18253378/javascript-blob-upload-with-formdata