JSonifying eine BLOB-Datei

Question

Ich versuche, eine BLOB-Datei JSONify, so dass ich es über AJAX-Anforderungen senden kann. Ich habe es mit dem folgenden Code ohne Erfolg versucht. Wenn ich eine JSONified-Datei analysiere, erhalte ich nur eine andere Datei mit viel kleinerer Größe.

function test(blob, cb) { 

     var fileReader = new FileReader() 
     fileReader.readAsArrayBuffer(blob) 
     fileReader.onloadend = function() {    

      // client 
      var arry = Array.from(new Uint8Array(fileReader.result)) 
      var data = {data: arry } 
      var json = JSON.stringify(data) 

      // server 
      var parse = JSON.parse(json) 
      var arr = parse.data.buffer 
      var blob = new Blob([arr]) 
     }   
} 

Answer 1

können Sie versuchen, FileReader.readAsDataURL() -Methode verwendet werden, und die Daten als Base64-codierte Zeichenfolge senden, und als es auf der Serverseite zu dekodieren. Die Base64-Zeichenfolge ist viel kleiner als die JSON-Zeichenfolge, die ein Array darstellt.

Hier ist ein Beispiel

function getBase64() { 
 
    var file = document.querySelector('input[type=file]').files[0]; 
 
    var reader = new FileReader(); 
 
    reader.addEventListener("load", function() { 
 
    \t document.getElementById("result").value = reader.result; 
 
    }, false); 
 
    
 
    if (file) { 
 
    reader.readAsDataURL(file); 
 
    } 
 
}

<input type="file" onchange="getBase64()" /> 
 
<br/> 
 
<textarea id="result"></textarea>

Answer 2

Sie können FormData verwenden.

JQuery Beispiel (der Einfachheit halber):

var oFormData = new FormData(); 
$(':input', this).each(function(){ 
    if(this.name){ 
     var oValue = this.value; 
     if(this.type == 'file'){ 
      oValue = this.files[0]; //TODO if "input file multiple" need loop each value 
     } 
     oFormData.append(this.name, oValue); 
    } 
}); 

$.ajax({ 
    url: 'http://example.com/xhr', 
    type: "POST", 
    data: oFormData, 
    processData: false, 
    contentType: false, 
    error: function (oRequest, sTextStatus, oErrorThrown){ 
     console.log(sTextStatus); 
    }, 
    success: function (oData, sTextStatus, oRequest){ 
     console.log(oData); 
    }, 
});