Wie man Datei in Javascript vortäuscht?

Question

Ich entwickle ein kleines Projekt, um meine TDD-Fähigkeiten auszuüben. Das Projekt besteht aus einem Audio-Player mit Drag'n'Drop-Dateien in der Playlist. Ich benutze Jasmine als Testing Framework. Das Problem, dem ich gegenüberstand, ist, dass ich Javascript-Dateien nicht zum Testen meiner Dateiupload-Funktionalität vortäuschen kann. Ich habe versucht, Datei wie folgt zu erstellen:

new File(new Blob(), "name"); 

, aber Chrome ermöglicht es nicht, Dateien manuell zu erstellen. Der Konstruktor der Datei ist nicht erlaubt. Ich habe eine Lösung mit grunt.js gefunden, die darin besteht, einige Dateien von grunt zurückzugeben, aber ich möchte wirklich nicht serverseitig für ein so kleines Testprojekt verwenden. Gibt es eine Problemumgehung für dieses Problem?

Answer 1

Sie brauchen nicht einen Klecks zu erstellen, können Sie do this, die direkt die Original-Bild Zeichenfolge gilt (I this converter verwendet wird), oder Sie können das folgende Beispiel tun folgen (wenn Sie wirklich nicht kümmern ein gültiges zu haben Bild]):

html <img id="test" />

var img = window.btoa('I don't care about a broken image'); 
document.getElementById('test').src='data:image/png;base64,'+img; 

Die btoa Funktion ist nur base64 aus einem String zu erstellen.

Answer 2

Chrome können Sie eine neue Datei erstellen:

var f = new File([""], "filename"); 

jedoch IE11 (? Und andere Browser) nicht.

Hier ist meine (nicht zufrieden?) Gefälschte Datei:

var blob = new Blob([""], { type: 'text/html' }); 
blob["lastModifiedDate"] = ""; 
blob["name"] = "filename"; 
var fakeF = blob; 

Sie können in den Werten füllen, wie Sie sehen, passen. Sie können den Blob mit allem füllen, was Sie brauchen. (Siehe die andere Antwort für die Verwendung eines Bildes).

Ich habe dies in IE11, Chrome und Firefox getestet. Bisher scheint ich zu arbeiten, zumindest für meine Unit Testing Zwecke.

Bonus: Hier ist es in Typoskript:

let blob = new Blob([""], { type: 'text/html' }); 
blob["lastModifiedDate"] = ""; 
blob["name"] = "filename"; 

let fakeF = <File>blob;