我對這個異步的概念很陌生，等待，承諾..范式..請幫助我
我有一個這樣的輸入欄位
我有一個全域變數。如何用基本編碼值var base64填充全域變數。base64在 addEventListener reader.result 中的函式內部顯示基本編碼值。我如何將它傳遞給外部全域變數。我嘗試了很多..因為它似乎是一個異步函式..行為似乎很安靜并且看起來很困難在趕上，我也沒有得到預期的結果
<input type="file" id="photo" accept="image/*" required @change="UploadPhoto()" />
UploadPhoto() 的改變函式是 ..{This i got from mozilla}
function UploadPhoto() {
const file = document.querySelector('#photo').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
console.log(reader.result);
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
reader.addEventListener另外，如果您能解釋一下異步行為的作業原理和 情況，我將不勝感激。我在reader.readAsDataURL(file);Google 上搜索了很多，但找不到詳細解釋這兩個函式的文章。
uj5u.com熱心網友回復：
想要一個全域的（在這種情況下）是沒有你需要做的工具的癥狀。
如果你真的需要一個全域的，你可以這樣得到它......
let b64Encoded;
function UploadPhoto() {
const file = document.querySelector('#photo').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
b64Encoded = btoa(reader.result);
}, false);
但是，正如您所想的，現代的做法是使用 Promise。這將使代碼更易于理解，并且在您實際發布編碼檔案時將證明是一個更好的決定......
首先將檔案閱讀器包裝在一個承諾中。 這是一個關于這個主題的好帖子，這是妙語（略微現代化）
async function readAsDataURL(file) {
return new Promise((resolve, reject) => {
const fr = new FileReader();
fr.onerror = reject;
fr.onload = () => {
resolve(fr.result);
}
fr.readAsDataURL(file);
});
}
像這樣使用它：
// we don't need this anymore :-)
// let b64Encoded;
async function UploadPhoto() {
const file = document.querySelector('#photo').files[0];
const result = await readAsDataURL(file);
const b64Encoded = btoa(result); // stack var, as it should be!
// insert real (promise-based) network code here
return myNetworkLibrary.post(b64Encoded);
}
檔案閱讀器上的addEventListener方法是老派異步的一部分：它說：檔案閱讀器將在單獨的執行緒上執行 i/o。它會通過呼叫您指定的函式（即“偵聽器”部分）告訴您何時完成（即“事件”部分），將其傳遞給要呼叫的函式（即“添加”部分）。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/434611.html
標籤：javascript 图片 Vue.js base64
上一篇：“button.disabled=true”和“button.value.disabled=true”之間的區別？