Datei Hochladen ReadAsDataUrl

Question

Ich habe eine Frage über die File API und Hochladen von Dateien in JavaScript und wie ich dies tun soll.

Ich habe bereits einen Datei-Uploader verwendet, der ziemlich einfach war, er nahm einfach die Dateien von einer Eingabe und machte eine Anfrage an den Server, der Server behandelte dann die Dateien und lud eine Kopie auf den Server in einem Upload-Verzeichnis hoch .

Ich versuche jedoch, Menschen die Möglichkeit zu geben, eine Datei vor dem Hochladen in der Vorschau anzuzeigen. So nutzte ich die File API, speziell die new FileReader() und die folgende readAsDataURL().

Das Dateiobjekt hat eine Liste von Eigenschaften wie .size und .lastModifiedDate und ich hinzugefügt, um die readAsDataURL() Ausgabe meines Dateiobjekt als Eigenschaft für eine einfachen Zugang in meinem Angular ng-repeat().

Meine Frage ist, fiel mir ein, als ich dies tat, dass ich die Daten in einer Datenbank speichern konnte anstatt die eigentliche Datei hochladen? Ich war mir nicht sicher, ob das Ändern der Dateidaten direkt mit ihrer Daten als Eigenschaft die Übertragung beeinflussen würde.

Was ist die beste Vorgehensweise? Ist es besser, eine Datei hochzuladen, oder können Sie die Daten einfach speichern und dann ausgeben, da dies im Wesentlichen die Datei selbst ist? Soll ich das Dateiobjekt nicht direkt ändern?

Vielen Dank.

Edit: Ich sollte auch beachten, dass dies ein Projekt für einen Kunden ist, der es schwer für Benutzer sein möchte, hochgeladene Inhalte einfach aus der Anwendung zu nehmen und sie zu speichern und dann neu zu verteilen. Würde das Speichern der Dateien URLs in einer Datenbank gegen Rechtsklick-Save-As-Verhalten mindern oder nicht?

Answer 1

Es gibt mehrere Möglichkeiten, eine Datei in der Vorschau anzuzeigen. Das erste ist DataURL mit dem FileReader, wie Sie es nennen. aber es gibt auch die URL.createObjectURL die ist schneller

Decoding und Encoding zu und von base64 dauert länger, es braucht mehr Berechnungen, mehr CPU/Speicher dann, wenn es im Binärformat wäre.

die ich nachweisen kann, unter

var url = 'https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG' 
 

 

 
fetch(url).then(res => res.blob()).then(blob => { 
 

 
    // Simulates a file as if you where to upload it throght a file input and listen for on change 
 
    var files = [blob] 
 

 
    var img = new Image 
 
    var t = performance.now() 
 
    var fr = new FileReader 
 

 
    img.onload =() => { 
 
    // show it... 
 
    // $('body').append(img) 
 

 
    var ms = performance.now() - t 
 
    document.body.innerHTML = `it took ${ms.toFixed(0)}ms to load the image with FileReader<br>` 
 

 

 
    // Now create a Object url instead of using base64 that takes time to 
 
    // 1 encode blob to base64 
 
    // 2 decode it back again from base64 to binary 
 
    var t2 = performance.now() 
 
    var img2 = new Image 
 
    img2.onload =() => { 
 
     // show it... 
 
     // $('body').append(img) 
 
     var ms2 = performance.now() - t2 
 
     document.body.innerHTML += `it took ${ms2.toFixed(0)}ms to load the image with URL.createObjectURL<br><br>` 
 
     document.body.innerHTML += `URL.createObjectURL was ${(ms - ms2).toFixed(0)}ms faster` 
 
    } 
 
    img2.src = URL.createObjectURL(files[0]) 
 

 
    } 
 
    fr.onload =() => (img.src = fr.result) 
 
    fr.readAsDataURL(files[0]) 
 

 
})

Die Base64 wird ~ 3x größer. Für Mobilgeräte denke ich, dass Sie Bandbreite und Akku sparen möchten.

Aber dann gibt es auch die Latenzzeit eine zusätzliche Anforderung zu tun, aber das ist, wo http 2