Maison >interface Web >js tutoriel >Comment convertir des fichiers en Base64 en JavaScript ?

Comment convertir des fichiers en Base64 en JavaScript ?

Barbara Streisand
Barbara Streisandoriginal
2024-12-03 04:53:08737parcourir

How to Convert Files to Base64 in JavaScript?

Conversion de fichiers en Base64 en JavaScript : un guide complet

Lorsque vous travaillez avec des applications Web, vous devrez souvent transmettre des fichiers dans le cadre de échange de données. Pour y parvenir de manière transparente, la conversion des fichiers au format Base64 devient nécessaire. Cette technique de codage énigmatique représente des données binaires à l'aide d'un sous-ensemble de caractères ASCII imprimables, ce qui la rend adaptée à la transmission de fichiers via HTTP ou d'autres protocoles textuels.

Problème :

Supposons que vous ayez un objet File obtenu via la méthode document.querySelector :

file = document.querySelector('#files > input[type="file"]').files[0];

Votre objectif est de convertir cet objet File à une chaîne Base64 pour un transfert de données efficace.

Solution :

Pour transformer le fichier en Base64, vous pouvez utiliser la classe FileReader fournie par JavaScript. Cette classe vous permet de lire le contenu d'un fichier et de l'encoder au format Base64. Voici comment l'implémenter :

function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        console.log(reader.result);
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file); // prints the Base64 string

Ce code initialise l'instance FileReader et lance la lecture du fichier en tant qu'URL de données (DataURL). Une fois l'opération de lecture terminée avec succès, l'événement onload est déclenché et la chaîne Base64 convertie est obtenue à partir du reader.result. Vous pouvez désormais utiliser cette chaîne Base64 pour l'échange de données ou à toute autre fin souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn