imagen files convertir convert btoa javascript base64

files - javascript base64 encode



¿Cómo convertir archivos a base64 en JavaScript? (6)

A partir de las respuestas de Dmitri Pavlutin y joshua.paling, aquí hay una versión extendida que extrae el contenido base64 (elimina los metadatos al principio) y también garantiza que el relleno se realice correctamente .

function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { let encoded = reader.result.replace(/^data:(.*,)?/, ''''); if ((encoded.length % 4) > 0) { encoded += ''=''.repeat(4 - (encoded.length % 4)); } resolve(encoded); }; reader.onerror = error => reject(error); }); }

Ahora obtengo el objeto File por esta línea:

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

Necesito enviar este archivo a través de json en base 64. ¿Qué debo hacer para convertirlo en una cadena base64?


Aquí hay un par de funciones que escribí para obtener un archivo en formato json que se puede pasar fácilmente:

//takes an array of JavaScript File objects function getFiles(files) { return Promise.all(files.map(file => getFile(file))); } //take a single JavaScript File object function getFile(file) { var reader = new FileReader(); return new Promise((resolve, reject) => { reader.onerror = () => { reader.abort(); reject(new Error("Error parsing file"));} reader.onload = function () { //This will result in an array that will be recognized by C#.NET WebApi as a byte[] let bytes = Array.from(new Uint8Array(this.result)); //if you want the base64encoded file you would use the below line: let base64StringFile = btoa(bytes.map((item) => String.fromCharCode(item)).join("")); //Resolve the promise with your custom file structure resolve({ bytes: bytes, base64StringFile: base64StringFile, fileName: file.name, fileType: file.type }); } reader.readAsArrayBuffer(file); }); } //using the functions with your file: file = document.querySelector(''#files > input[type="file"]'').files[0] getFile(file).then((customJsonFile) => { //customJsonFile is your newly constructed file. console.log(customJsonFile); }); //if you are in an environment where async/await is supported files = document.querySelector(''#files > input[type="file"]'').files let customJsonFiles = await getFiles(files); //customJsonFiles is an array of your custom files console.log(customJsonFiles);


La función JavaScript btoa() se puede usar para convertir datos en una cadena codificada en base64


Manera ES6

const toBase64 = file => new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); async function Main() { const file = document.querySelector(''#myfile'').files[0]; console.log(await toBase64(file)); } Main();


Pruebe la solución usando la class FileReader :

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

Tenga en cuenta que .files[0] es un tipo de File , que es una subclase de Blob . Por lo tanto, se puede usar con FileReader .
Vea el example trabajo completo.


Si buscas una solución basada en promesas, este es el código de @ Dmitri adaptado para eso:

function getBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result); reader.onerror = error => reject(error); }); } var file = document.querySelector(''#files > input[type="file"]'').files[0]; getBase64(file).then( data => console.log(data) );