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)
);