जवाबों:
आधुनिक 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();
युपीडी:
यदि आप त्रुटियों को पकड़ना चाहते हैं
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प्रकार है, जो एक उपवर्ग है Blob। इस प्रकार इसका उपयोग किया जा सकता है FileReader।
काम करने का पूरा उदाहरण देखें ।
return reader.resultसे getBase64()(न कि का उपयोग करने से समारोह console.log(reader.result)) क्योंकि मैं एक चर के रूप में बेस 64 पर कब्जा (और फिर Google Apps स्क्रिप्ट के लिए भेज) करना चाहते हैं। मैंने फ़ंक्शन को इसके साथ बुलाया: 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(/^.*,/, ''));। चूँकि कोमा ,base64 वर्णमाला के बाहर है, इसलिए हम कोमा तक और इसमें शामिल होने वाली किसी भी चीज़ को छीन सकते हैं। stackoverflow.com/a/13195218/1935128
data:, बिना किसी अल्पविराम के, इसलिए मैं उस पहले भाग को उसी तरह रखूंगा। मैंने उसी हिसाब से जवाब अपडेट किया है।
जावास्क्रिप्ट बोटोआ () फ़ंक्शन का उपयोग डेटा को बेस 64 एनकोडेड स्ट्रिंग में बदलने के लिए किया जा सकता है
यहाँ एक दो फ़ंक्शंस हैं, जिन्हें मैंने एक json फॉर्मेट में एक फाइल प्राप्त करने के लिए लिखा था, जिसे आसानी से पास किया जा सकता है:
//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कोई ऐसा कार्य करते हैं, जो अस्वीकृत किए गए वादे को वापस करता है, तो आपको कॉल द्वारा लौटाया गया कोई त्रुटि नहीं मिलेगा; इसे फेंक दिया जाएगा और आपको इसे पकड़ने की आवश्यकता होगी।