Jak przekonwertować obiekt javascript do rzeczywistego pliku w celu przesłania z HTML5

Question

Mam obiekt javascript z ogromną ilością danych w nim, w tym kilka dużych kodowanych kodowania base64.

Obecnie wysyłamy dane do serwera za pomocą prostego testu POST z ajaxem, ale ponieważ dane są tak duże, czas oczekiwania użytkownika jest niedopuszczalny.

Z tego powodu chcemy wykorzystać nowe funkcje przesyłania plików html5 i faktycznie mierzyć postępy, gdy dane są przesyłane na serwer, dzięki czemu użytkownik otrzymuje stałą informację zwrotną podczas tego długiego procesu.

Aby korzystać z tej funkcji, ta duża tablica będzie musiała zostać przesłana jako rzeczywisty plik, a nie jako ogromny obiekt wysłany jako parametry adresu URL.

Czy istnieje jakiś sposób, aby albo:

A. Konwersja tego obiektu do rzeczywistego pliku tekstowego i wysłać go w ten sposób.

lub

B. Hak do postępu API HTML5 i faktycznie mierzyć postęp tej standardowej ajax POST.

Z góry dziękuję.

Answer 1

Możliwe jest wzięcie obiektu JavaScript (myData), dołączenie go do JSON, spakowanie go do Blobu typu JSON typu MIME i wysłanie go na serwer za pomocą API do przesyłania HTML5. Możesz użyć postępu (w funkcji oddzwaniania progress), aby zaktualizować wartość paska postępu HTML5.

var myData = { 
    data1: "Huge amount of data", 
    data2: "More very large data" 
}; 

var xhr = new XMLHttpRequest(); 

xhr.upload.addEventListener('progress', function (e) { 
    console.log(100*(e.loaded/e.total) + '%'); 
}, false); 

xhr.open('POST', 'url', true); 

var data = new FormData(); 
data.append('file', new Blob([JSON.stringify(myData)],{type:'application/json'})); 
xhr.send(data); 

Answer 2

Konwersja do Blob przedmiot lub File obiekt, a następnie dołączyć do FormData i używać xhr lub fetch wysłać do serwera.

var data = 'some data'; //string, arrary buffer, typed array, blob, ... 
var filename01 = 'abc.txt', filename02 = 'efg.txt'; 
var type = 'text/plain'; 
var fd = new FormData(); 

//use file object 
var file = new File([data], filename01, {type:type}); //add filename here 
fd.append('file01', file); 

//use blob object 
var blob = new Blog([data], {type:type}); 
fd.append('file02', blob, filename02); //add filename by append method 

fetch('/server.php', {method:'POST', body:fd}) 
.then(function(res){ 
    return res.text(); 
}) 
.then(console.log) 
.catch(console.error) 
;