解決vue中reader.onload讀取文件的異步問(wèn)題
更新時(shí)間：2022年10月09日 15:48:05 作者：十二點(diǎn)的洛杉磯
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
reader.onload讀取文件的異步問(wèn)題
問(wèn)題
用element上傳文件組件上傳文件，然后在前端讀取，由于reader.onload讀取文件是異步的會(huì)造成return回去的數(shù)據(jù)無(wú)法被獲取
export function import_excel_to_json(file){
let jsonData = {}
let reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = function () {
let buffer = reader.result
let bytes = new Uint8Array(buffer)
let length = bytes.byteLength
let binary = ''
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
let XLSX = require('xlsx')
let wb = XLSX.read(binary, {
type: 'binary'
})
wb.SheetNames.map(item=>{
jsonData[item] = XLSX.utils.sheet_to_json(wb.Sheets[item])
jsonData[item].shift()
})
return jsonData
}
})
}在外部調(diào)用該函數(shù)：
let data = this.import_excel_to_json(File)
data獲取不到返回值
解決
用Promise進(jìn)行處理
export function import_excel_to_json(file){
return new Promise(function (resolve, reject) {
let jsonData = {}
let reader = new FileReader()
reader.readAsArrayBuffer(file)
reader.onload = function () {
let buffer = reader.result
let bytes = new Uint8Array(buffer)
let length = bytes.byteLength
let binary = ''
for (let i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
let XLSX = require('xlsx')
let wb = XLSX.read(binary, {
type: 'binary'
})
wb.SheetNames.map(item=>{
jsonData[item] = XLSX.utils.sheet_to_json(wb.Sheets[item])
jsonData[item].shift()
})
resolve(jsonData);
}
})
}reader.onloadend異步返回結(jié)果問(wèn)題
原本想直接return，但因?yàn)閞ead.onloadend是異步任務(wù)，無(wú)法獲取到。
因此可以使要讀取文件的函數(shù)返回值為一個(gè)promise，這樣便可解決這一問(wèn)題。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite實(shí)現(xiàn)在線(xiàn)預(yù)覽pdf功能
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)vue3和vite實(shí)現(xiàn)在線(xiàn)預(yù)覽pdf功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,感興趣的小伙伴可以學(xué)習(xí)一下2023-10-10
vue高德地圖，帶你玩轉(zhuǎn)周邊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要給大家介紹了關(guān)于Vue3中emits與attrs區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
vue3?Table分頁(yè)保留選中狀態(tài)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁(yè)保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁(yè)和選中功能,需要的朋友可以參考下2023-08-08
當(dāng)我們未設(shè)置keepAlive的最大緩存數(shù)時(shí),當(dāng)緩存組件太多,會(huì)導(dǎo)致內(nèi)存溢出,本文給大家介紹了vue3手動(dòng)刪除keepAlive緩存的方法,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue中el-table多層級(jí)嵌套的具體實(shí)現(xiàn)
本文主要介紹了vue中el-table多層級(jí)嵌套的具體實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了vue簡(jiǎn)易記事本的開(kāi)發(fā)過(guò)程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
基于vue-cli 打包時(shí)抽離項(xiàng)目相關(guān)配置文件詳解
下面小編就為大家分享一篇基于vue-cli 打包時(shí)抽離項(xiàng)目相關(guān)配置文件詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue中的install方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03