解決vue中reader.onload讀取文件的異步問題
更新時間：2022年10月09日 15:48:05 作者：十二點的洛杉磯
這篇文章主要介紹了解決vue中reader.onload讀取文件的異步問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
reader.onload讀取文件的異步問題
問題
用element上傳文件組件上傳文件，然后在前端讀取，由于reader.onload讀取文件是異步的會造成return回去的數(shù)據(jù)無法被獲取
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進行處理
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é)果問題
原本想直接return，但因為read.onloadend是異步任務(wù)，無法獲取到。
因此可以使要讀取文件的函數(shù)返回值為一個promise，這樣便可解決這一問題。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue的Options用法說明，具有很好的參考價值，希望對大家有所2020-08-08
element 結(jié)合vue 在表單驗證時有值卻提示錯誤的解決辦法
這篇文章主要介紹了element 結(jié)合vue 在表單驗證下，有值卻提示錯誤的解決辦法,需要的朋友可以參考下2018-01-01
vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決
這篇文章主要介紹了vue中改變了vuex數(shù)據(jù)視圖不更新,也監(jiān)聽不到的原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue?配置代理詳情，文章圍繞主題的相關(guān)資料展開詳細(xì)內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-04-04
在Vue3中,this的使用方式與Vue2存在較大差異,尤其是在引入組合式API后,本文詳細(xì)解析了Vue3中this的使用情況、底層源碼和設(shè)計理念,并提供了面試技巧,感興趣的可以了解一下2024-09-09
el-form-item?prop屬性動態(tài)綁定不生效問題及解決
這篇文章主要介紹了el-form-item?prop屬性動態(tài)綁定不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue 路由組件向app.vue主文件傳值的方式(兩種常見方式)
在Vue.js中,可以使用路由傳參的方式向App.vue主頁面?zhèn)鬟f數(shù)據(jù),有多種方法可以實現(xiàn)這一目標(biāo),本文結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
這篇文章主要介紹了Vue.js?前端路由和異步組件介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue+Element-U實現(xiàn)分頁顯示效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應(yīng)用,這次給大家主要分享的是基于electron最新版本整合vite4.x構(gòu)建vue3桌面端應(yīng)用程序，需要的朋友可以參考下2023-05-05