如何將文件轉換爲JavaScript中的base64？

現在我通過這條線越來越File對象：如何將文件轉換爲JavaScript中的base64？

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

我需要通過JSON在基地64，我應該怎麼做才能將其轉換爲Base64字符串發送此文件？

來源

2016-03-29 Vassiliy Vorobyov

113

使用嘗試溶液中的FileReaderclass：

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一個sublcass 。因此它可以與FileReader一起使用。
查看完整作品example。

來源

2016-03-29 10:17:13

非常有幫助的回答！ –

閱讀更多關於FileReader API：https://developer.mozilla.org/en-US/docs/Web/API/FileReader和瀏覽器支持：http://caniuse.com/#feat=filereader –

我試圖用'從getBase64（）函數返回reader.result'（而不是使用'console.log（reader.result）'），因爲我想捕獲base64作爲變量（然後將其發送到Google Apps腳本）。我使用'var my_file_as_base64 = getBase64（file）'調用該函數，然後嘗試使用'console.log（my_file_as_base64）'打印到控制檯，剛剛得到了'undefined'。我該如何正確地將base64分配給一個變量？ – user1063287

的JavaScript btoa()函數可以用於將數據轉換成64位編碼串

來源

2016-03-29 09:53:15

BTOA只用繩子工作。如何使用它與文件？ –

你將不得不首先閱讀文件，然後將其傳遞給此函數..像http://jsfiddle.net/eliseosoto/JHQnk/ –

@PranavManiar你的小提琴不再有效。你能更新鏈接嗎？ – Dan

如果你是一個基於承諾的解決方案後，這是@德米特里的代碼改編爲：

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(values.profile_image_new[0]).then(
    data => console.log(data) 
);

來源

2017-10-09 06:12:29

如何將文件轉換爲JavaScript中的base64？

回答

相關問題