উত্তর:
আধুনিক ES6 উপায় (async / অপেক্ষা)
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();
UPD:
আপনি যদি ত্রুটি ধরতে চান
async function Main() {
const file = document.querySelector('#myfile').files[0];
const result = await toBase64(file).catch(e => Error(e));
if(result instanceof Error) {
console.log('Error: ', result.message);
return;
}
//...
}
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
লক্ষ্য করুন যে .files[0]এটি একটি Fileপ্রকার, যা একটি sublcass Blob। এইভাবে এটি ব্যবহার করা যেতে পারে FileReader।
সম্পূর্ণ কাজের দেখুন উদাহরণ ।
return reader.resultথেকে getBase64()(ব্যবহার না করে console.log(reader.result)) ব্যবহার করার চেষ্টা করেছি কারণ আমি বেস 64 কে ভেরিয়েবল হিসাবে ক্যাপচার করতে চাই (এবং তারপরে এটি গুগল অ্যাপস স্ক্রিপ্টে প্রেরণ করব)। আমি এর সাথে ফাংশনটি কল করেছি: var my_file_as_base64 = getBase64(file)এবং তারপরে কনসোলটি মুদ্রণের চেষ্টা করেছি console.log(my_file_as_base64 )এবং পেয়েছি undefined। আমি কীভাবে বেসকে 64 কে ভেরিয়েবলকে সঠিকভাবে নির্ধারণ করতে পারি?
যদি আপনি কোনও প্রতিশ্রুতি ভিত্তিক সমাধানের পরে থাকেন তবে এটি @ দিমিত্রি কোড এর জন্য অভিযোজিত:
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)
);
দিমিত্রি পাভলুটিন এবং জোশুয়া.পলিংয়ের উত্তরগুলির উপরে বিল্ডিং, এখানে একটি বর্ধিত সংস্করণ যা বেস 64৪ সামগ্রীটি শুরু করে (শুরুতে মেটাডেটা সরিয়ে দেয়) এবং প্যাডিং সঠিকভাবে হয়েছে কিনা তাও নিশ্চিত করে ।
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
let encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
if ((encoded.length % 4) > 0) {
encoded += '='.repeat(4 - (encoded.length % 4));
}
resolve(encoded);
};
reader.onerror = error => reject(error);
});
}
resolve(reader.result.replace(/^.*,/, ''));। যেহেতু কোমা ,বেস 64 বর্ণমালার বাইরে থাকে আমরা কোমা সহ আগত যে কোনও কিছু ছিনিয়ে নিতে পারি। stackoverflow.com/a/13195218/1935128
data:কোনও কমা ছাড়াই ঠিক থাকতে পারে , তাই আমি প্রথম অংশটি যেমন রাখি তেমন রাখব। আমি সেই অনুযায়ী উত্তর আপডেট করেছি।
জাভাস্ক্রিপ্ট বিটিওএ () ফাংশনটি ডেটা বেস 64 এনকোড স্ট্রিংয়ে রূপান্তর করতে ব্যবহার করা যেতে পারে
এখানে একটি দম্পতি ফাংশন লিখেছি যাতে আমি একটি জসন ফর্ম্যাটে একটি ফাইল পেতে পারি যা সহজেই পাস করা যায়:
//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);
onInputChange(evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function () {
var base64 = fr.result;
debugger;
}
fr.readAsDataURL(files[0]);
}
}
awaitকোনও ফাংশন যা প্রত্যাখ্যাত প্রতিশ্রুতি ফেরত দেয়, আপনি কল দিয়ে ফিরে ত্রুটি পাবেন না; এটি নিক্ষেপ করা হবে এবং আপনার এটি ধরতে হবে।