我想從上傳的影像中獲取 base64 字串。第一次運行代碼時，它回傳未定義。當我追趕它時，它作業正常。我怎樣才能解決這個問題？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload</title>
</head>
<body>
<input type="file" id="file">
<button id="button" onclick="upload()">Upload</button>
<script type="text/javascript">
var result;
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
result = reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
return result;
}
function upload() {
var file = document.querySelector('input').files[0];
console.log(getBase64(file));
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
ASDFGerte鏈接的答案確實解釋了這一點，但我將在您的問題的背景關系中進行解釋。
讓我們來看看會發生什么：
用戶點擊按鈕
函式上傳執行
getBase64 被呼叫
創建檔案閱讀器并讀取檔案
為.onload事件監聽器分配一個函式
為.onerror事件監聽器分配一個函式
回傳變數result，此時不存在，因為.onload事件還沒有觸發。
第二次點擊后，事件已經觸發，但是對于之前的結果，不是新的結果。
第二個目標是解決這個問題，我最喜歡的方法是使用async await語法。
看看你的代碼的這個返工
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Upload</title>
</head>
<body>
<input type="file" id="file">
<button id="button" onclick="upload()">Upload</button>
<script type="text/javascript">
async function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
let result;
await new Promise(resolve => {
reader.onload = function () {
result = reader.result;
resolve();
};
reader.onerror = function (error) {
console.log('Error: ', error);
resolve();
};
});
return result;
}
async function upload() {
var file = document.querySelector('input').files[0];
const result = await getBase64(file);
console.log(result);
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
return reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
async function upload() {
var file = document.querySelector('input').files[0];
let result = await getBase64(file)
console.log(result);
}FileReader異步運行，因此reader.onload不會立即完成。你result在reader.onload完成之前回傳所以result沒有價值。
第二次運行時upload， result 確實有一個值，因為reader.onload已經完成。記錄的結果很可能是上一次呼叫的結果upload。
您可以通過創建upload一個異步函式來解決此問題，該函式 uteawait 來自 的回應getBase64。這也將要求您 rn 結果reader.onload而不是在<script>標簽中全域設定值
uj5u.com熱心網友回復：
您需要申報FileReader的外upload()，并使用onload功能的console.log。
var reader = new FileReader();
reader.onload = function (event) {
var dataURL = event.target.result;
console.log(dataURL);
};
update僅在函式中使用readDataURL
function upload() {
var file = document.querySelector("input").files[0];
reader.readAsDataURL(file)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/360249.html
標籤：javascript html base64