[javascript] 파일을 업로드하기위한 fileReader.readAsBinaryString

fileReader.readAsBinaryString을 사용하여 AJAX를 통해 서버에 PNG 파일을 업로드하려고 시도하고 코드를 제거했습니다 (fileObject는 내 파일에 대한 정보를 포함하는 객체입니다).

var fileReader = new FileReader();

fileReader.onload = function(e) {
    var xmlHttpRequest = new XMLHttpRequest();
    //Some AJAX-y stuff - callbacks, handlers etc.
    xmlHttpRequest.open("POST", '/pushfile', true);
    var dashes = '--';
    var boundary = 'aperturephotoupload';
    var crlf = "\r\n";

    //Post with the correct MIME type (If the OS can identify one)
    if ( fileObject.type == '' ){
        filetype = 'application/octet-stream';
    } else {
        filetype = fileObject.type;
    }

    //Build a HTTP request to post the file
    var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(fileObject.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + e.target.result + crlf + dashes + boundary + dashes;

    xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);

    //Send the binary data
    xmlHttpRequest.send(data);
}

fileReader.readAsBinaryString(fileObject);

업로드하기 전에 (VI 사용) 파일의 처음 몇 줄을 살펴보면

업로드 후 동일한 파일이 표시됩니다.

그래서 어딘가에 서식 / 인코딩 문제처럼 보였고, 원시 바이너리 데이터에서 간단한 UTF8 인코딩 기능을 사용해 보았습니다.

    function utf8encode(string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }

        return utftext;
    )

그런 다음 원래 코드에서

//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(file.file.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + utf8encode(e.target.result) + crlf + dashes + boundary + dashes;

나에게 출력을 제공합니다

여전히 원시 파일이 무엇인지 = (

인코딩 문제를 피하기 위해 파일을 인코딩 /로드 / 처리하는 방법은 HTTP 요청에서 수신되는 파일이 업로드되기 전의 파일과 동일합니다.

다른 유용한 정보, fileReader.readAsBinaryString ()을 사용하는 대신 fileObject.getAsBinary ()를 사용하여 바이너리 데이터를 가져 오면 제대로 작동합니다. 그러나 getAsBinary는 Firefox에서만 작동합니다. 나는 Mac에서 Firefox와 Chrome에서 이것을 테스트했으며 둘 다 동일한 결과를 얻었습니다. 백엔드 업로드는 Mac에서 다시 실행 되는 NGINX 업로드 모듈에 의해 처리됩니다 . 서버와 클라이언트가 동일한 시스템에 있습니다. 내가 업로드하려는 모든 파일에서 똑같은 일이 발생합니다. 가장 분명한 예이기 때문에 PNG를 선택했습니다.