2016-02-02 10 views
5

Quindi, per alcune ragioni, ho bisogno di inserire l'immagine codificata in base64 in un input usando FORM. Dimensioni dell'immagine ~ 1,1 MB, dimensioni 2500x1700. Dimensione codificata Base64 ~ 1,5 MB.Perdita di memoria di Chrome con POST con immagine codificata Base64 in un input - come risolvere?

Quindi ho due ingressi nel modulo: file di input e input nascosti. Dopo aver scaricato un'immagine per l'inserimento nascosto (utilizzando FileReader per convertire l'immagine in base64), cancello il valore del file di input, quindi, nessun file aggiuntivo.

Quando si tenta di inviare una pagina di modulo si blocca e il consumo di memoria aumenta dal 50% al 93% (4 GB di RAM) e quindi Chrome si arresta in modo anomalo.

Quando ho provato a eseguire questa pagina in Firefox (che è sempre lenta e lenta) ho un post immediato senza consumo di memoria extra.

Ovviamente lo pubblicherò su Chrome ma ora ho bisogno di sapere: c'è qualche trucco per evitarlo? Beh, forse non sono il primo ad aver trovato questo bug.


Ok, quindi, se l'uso input.value = e.target.result nell'evento onload di FileReader, ottengo perdita di memoria. Se imposto il testo personalizzato di uguale lunghezza su input.value, non ci sono problemi. Quindi, non penso che e.target.result possa salvare riferimento a FileReader (o può?), Perché è una stringa. Quindi abbiamo un problema di Chrome nativo al momento del ricevimento del risultato di FileReader.


input.addEventListener("change", function() { 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
    document.getElementById("input_hidden").value = e.target.result; 
    }; 
    reader.readAsDataURL(this.files[0]); 
}); 
+0

State facendo un post forma regolare o utilizzando qualche richiesta AJAX? Ad ogni modo mostra il tuo codice. E perché inviare in base64 quando è possibile inviare il file stesso? –

+0

Il codice è troppo grande. È un post normale. Perché sto usando il file di input multiplo, il che significa che l'utente può selezionare pochi file. Ma ho bisogno di dare la possibilità all'utente di cancellare alcune delle immagini prima di inviarle. Non riesco a manipolare l'input [type = file] .files perché è di sola lettura – user64675

+0

Il codice "potrebbe essere troppo grande" ma se non riesci a riprodurlo in un semplice esempio, non c'è nulla che possiamo fare per aiutarti oltre indovina. –

risposta

0

Prova ad utilizzare un invisibile <textarea> invece di input hidden.

sarebbe simile:

<textarea style="display:none" id="XXX"> 
$("XXX").value = base64 

anche assicurarsi di rimuovere il input file completamente, tenerlo al di fuori dei tag di modulo quindi rimuoverlo dal DOM.

Spero che questo aiuti

+0

Purtroppo no – user64675

Problemi correlati