web-dev-qa-db-fra.com

Convertir une URL en fichier ou en blob pour FileReader.readAsDataURL

Référence: FileReader.readAsDataURL

Considérant l'exemple suivant:

function previewFile(file) {

  var reader  = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result);
  }
  reader.readAsDataURL(file);
}

Il est dit:

instanceOfFileReader.readAsDataURL (objet blob);

blob: le blob ou le fichier à lire.

  1. Comment une URL de fichier locale telle que: 'file:///C:/path-to/root.png' Peut-elle être transmise à la fonction readAsDataURL()

  2. Est-ce que FileReader() est disponible dans un addon Firefox?

javascriptfirefox-addonfirefox-addon-restartless
37
erosman

Cette information est périmée pour l'instant, mais ne peut pas être supprimée.

  1. Vous pouvez créer File instances simplement en spécifiant un chemin lorsque votre code est doté de privilèges chrome:

    new File("/path/to/file");

    File est une sous-classe de Blob, donc toutes les instances de File sont également valides Blobs. Veuillez noter que cela nécessite n chemin de plate-forme et non une URL de fichier .

  2. Oui, FileReader est disponible pour les addons.

File et FileReader sont disponibles dans tous les windows. Si vous voulez les utiliser dans une portée non-fenêtre (comme bootstrap.js ou un module de code), vous pouvez utiliser nsIDOMFile/nsIDOMFileReader.

12
nmaier

Pour convertir une URL en blob pour FileReader.readAsDataURL (), procédez comme suit:

var request = new XMLHttpRequest();
request.open('GET', MY_URL, true);
request.responseType = 'blob';
request.onload = function() {
    var reader = new FileReader();
    reader.readAsDataURL(request.response);
    reader.onload =  function(e){
        console.log('DataURL:', e.target.result);
    };
};
request.send();
34
Felix Turner

Essayez ceci j’ai appris cela de @nmaier quand j’étais en train de bricoler avec la conversion en ico: Bien, je ne comprends pas vraiment ce qu'est un tampon de tableau, mais il fait ce dont nous avons besoin:

function previewFile(file) {

  var reader  = new FileReader();

  reader.onloadend = function () {
    console.log(reader.result); //this is an ArrayBuffer
  }
  reader.readAsArrayBuffer(file);
}

remarquez comment je viens de changer votre readAsDataURL en readAsArrayBuffer.

Voici l'exemple que @nmaier m'a donné: https://stackoverflow.com/a/24253997/1828637

il a un violon

si vous voulez prendre ceci et en faire un fichier, je penserais que vous utiliseriez file-output-stream dans le onloadend

13
Noitidart

Pour en savoir plus sur la réponse de Felix Turner, voici comment j’utiliserais cette approche avec l’API fetch.

async function createFile(){
  let response = await fetch('http://127.0.0.1:8080/test.jpg');
  let data = await response.blob();
  let metadata = {
    type: 'image/jpeg'
  };
  let file = new File([data], "test.jpg", metadata);
  // ... do something with the file or return it
}
createFile();
4
Tibor Udvari