Lire un fichier en mode synchrone en Javascript

Je voudrais lire un fichier et de le convertir en une chaîne encodée en base64 à l'aide de l'objet FileReader. Voici le code que j'utilise :

 
var reader = new FileReader(); 
reader.onloadend = function(evt) { 
//le fichier est chargé 
result_base64 = evt.cible.résultat; 
}; 
reader.readAsDataURL(fichier);

Mais dans ce cas, j'obtiens le résultat de la conversion dans le gestionnaire d'événements (onLoadEnd de l'événement). Je voudrais une méthode synchrone. Est-il un moyen de la "readAsDataURL" méthode peut retourner directement la valeur de la 'result_base64 variable ?

Grâce

  • "Je voudrais une méthode synchrone." Une raison particulière? Je ne pense pas que c'est possible.
  • firefox a/avait le fichier.getAsDataURL() méthode, mais il est obsolète et a été le seul sync version de n'importe quel navigateur, autant que je sache.
  • - Je stocker les chemins d'accès dans un local de stockage de base de données, j'ai besoin d'envoyer les images vers un serveur par la suite (avec une boucle sur toutes les images, c'est pourquoi j'ai besoin d'une méthode synchrone). Je voudrais éviter de stocker base64 chaînes de caractères dans la base de données afin de ne pas dépasser le local de stockage limite...
  • Mais vous pourriez mettre en œuvre la boucle, par exemple en appelant le télécharger pour le prochain dans le rappel d'achèvement de l'image précédente
  • Je voulais quelque chose de plus réutilisables que pourrait prendre un fichier comme entrée et le retour de la chaîne encodée en base64 de sortie mais il semble être impossible... Merci pour votre aide!
InformationsquelleAutor Laila | 2013-06-12
  1. 16

    Synchrone tâches (blocage) sont généralement mauvais. Si il n'y a pas vraiment de raison de le faire de manière asynchrone, je vous recommande fortement d'utiliser le rappel d'événement.

    Imaginez que votre fichier est endommagé et les api HTML5 cant lire, il l'habitude de vous donner le résultat. Il serait briser votre code et de bloquer le site. Ou, quelqu'un pourrait sélectionner un fichier de 10 go, ce qui aurait pour effet de geler votre page HTML jusqu'à ce que le fichier soit complètement chargée. Avec asynchrone gestionnaire d'événement à votre mesure d'intercepter les erreurs possibles.

    Pour contourner les limitations avec les rappels, j'utilise un truc tout simple:

    var ready = false;
var result = '';

var check = function() {
    if (ready === true) {
         //do what you want with the result variable
         return;
    }
    setTimeout(check, 1000);
}

check();

var reader = new FileReader();
reader.onloadend = function(evt) {
    //file is loaded
    result = evt.target.result;

    ready = true;
};
reader.readAsDataURL(file);

    la fonction de contrôle, vérifie chaque seconde si le prêt drapeau variable est définie sur true. Si oui, vous pouvez être sûr que le résultat est disponible.

    Il peut ne pas être la meilleure pratique de le faire, mais j'ai fait une webapp à l'aide de cette technique environ 30 fois avec plus de 10 setTimeouts en même temps, en cours d'exécution, et n'a rencontré aucun problème jusqu'à maintenant.

    • J'ai utilisé une astuce similaire, mais il s'est cassé une fois que j'ai inséré le code dans une boucle. J'ai finalement utilisé les rappels des méthodes combinées avec une fermeture à savoir quand la boucle se terminait.
    • Eu le même problème exactement comme je voulais passer le paramètre des variables à la fonction de rappel. Le but était de diviser le fichier en morceaux afin que je puisse l'envoyer morceau-sage sur le serveur. Les fermetures sont une grande chose une fois understanded.
    • stackoverflow.com/a/46832928/851951 cette approche est bonne, mais il continue à fonctionner de manière asynchrone.
    • Bien sûr, cela est plus à jour que ma réponse à partir de 2013.
    • "Synchrone tâches (blocage) sont généralement mauvais" - faux. Si cela est vrai pour le commun des environnements spécifiques, comme ceux qui sont associés avec le développement web, il n'est pas généralement mauvais. (par exemple, un seul thread non-web, non-INTERFACE utilisateur application dédiée sur du matériel embarqué)
    • Bien sûr, vous avez raison, mais depuis que cette question était à propos de javascript html5 filereader nous pouvons supposer que nous parlons d'un environnement de navigateur.

    InformationsquelleAutor David Fariña
  2. 4

    Vous pouvez utiliser la norme FileReaderSync, ce qui est plus simple, synchrone, le blocage de la version de la FileReader API, similaire à ce que vous utilisez déjà:

    let reader = new FileReaderSync();
let result_base64 = reader.readAsDataURL(file); 

console.log(result_base64); //aGV5IHRoZXJl...

    Gardez à l'esprit que ce n'est disponible que dans les threads de travail, pour des raisons évidentes.

    Si vous avez besoin d'une solution pour le thread principal qui "lit" comme un synchrone de l'API, vous pouvez enrouler le async FileReader en une promesse et l'utilisation asynchrone fonctions (vous devrez peut-être transpile):

    async function readFileAsDataURL(file) {
    let result_base64 = await new Promise((resolve) => {
        let fileReader = new FileReader();
        fileReader.onload = (e) => resolve(fileReader.result);
        fileReader.readAsDataURL(file);
    });

    console.log(result_base64); //aGV5IHRoZXJl...

    return result_base64;
}
    • Cette solution est esthétiquement l'un des meilleurs, mais gardez à l'esprit que readFileAsDataURL ira à la boucle d'événements, donc si vous appelez à partir d'un autre morceau de synchroniser le code que vous devez l'attendre, il aswell. Sinon, il sera de retour dans l'attente de la promesse.
    InformationsquelleAutor John Weisz
  3. -1

    De lire le contenu d'un fichier en mode synchrone utilisation fs.readFileSync

    var fs = require('fs');
var content = fs.readFileSync('myfilename');
console.log(content);

    fs.createReadStream crée un ReadStream.

    • Cela semble node.JS spécifique, il n'est pas dans n'importe quel navigateur, pour tous les autres étant sur le mauvais pied par la réponse.
    InformationsquelleAutor Jonathan Thurft
  4. -3

    Dans Node.js, Utilisez execSync de child_process et ont la coquille de la lire pour vous de façon synchrone. Rediriger la sortie de ce processus enfant pour le parent.

    //Don't forget to use your favorite encoding in toString()
var execSync = require('child_process').execSync;
var fileContents = execSync('cat path/to/file.txt', {stdio: "pipe"}).toString();

    Je serai heureux d'accepter votre candidature pour le UUOC prix. 😉

    InformationsquelleAutor Stephen Wylie
  5. -9

    Tard dans l'entreprise, mais peut-être cela va aider quelqu'un. Nous pouvons simplement prendre la lutte à l'extérieur de la chambre.

    var file = $('#myfile')[0].files[0];

var reader = new FileReader();
reader.onload = function(progressEvent) {
        //console.log(this.result);
        handle(this.result);
};
reader.readAsText(file);

function handle(temp_lines) {
    var inputLines=new Array();
    var lines = temp_lines.split('\n');

    for(var line = 0; line < lines.length; line++) {
        console.log(lines[line]);
        inputLines[line]=lines[line];
    }
}
    • Il n'est pas clair pour moi comment cela se fait de façon synchrone.
    • Il n'est pas. C'est un asynchrone façon de faire.
    InformationsquelleAutor AtanuCSE