fileReader.readAsBinaryString zum Hochladen von Dateien

Question

Versuchen Sie, fileReader.readAsBinaryString zu verwenden, um eine PNG-Datei auf den Server über AJAX hochzuladen, gestrippt unten Code (fileObject ist das Objekt mit Informationen über meine Datei);

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);

Die Prüfung der ersten Zeilen einer Datei vor dem Hochladen (mit VI) ergibt

Die gleiche Datei zeigt nach dem Hochladen

Es sieht also nach einem Formatierungs-/Kodierungsproblem aus. Ich habe versucht, eine einfache UTF8-Kodierungsfunktion für die binären Rohdaten zu verwenden

    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;
    )

Dann im ursprünglichen Code

//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;

was mir die folgende Ausgabe liefert

Immer noch nicht, was die Rohdatei war =(

Wie kodiere/lade/verarbeite ich die Datei, um die Kodierungsprobleme zu vermeiden, so dass die in der HTTP-Anforderung empfangene Datei dieselbe ist wie die Datei vor dem Hochladen?

Einige andere möglicherweise nützliche Informationen, wenn statt mit fileReader.readAsBinaryString() ich fileObject.getAsBinary() verwenden, um die binären Daten zu erhalten, es funktioniert gut. Aber getAsBinary funktioniert nur in Firefox. Ich habe dies in Firefox und Chrome, beide auf Mac, getestet und in beiden das gleiche Ergebnis erhalten. Die Backend-Uploads werden von der NGINX Hochlade-Modul , ebenfalls auf Mac. Der Server und der Client befinden sich auf demselben Rechner. Das Gleiche passiert mit jeder Datei, die ich hochzuladen versuche. Ich habe PNG gewählt, weil es das offensichtlichste Beispiel ist.