解决vue中reader.onload读取文件的异步问题
更新时间：2022年10月09日 15:48:05 作者：十二点的洛杉矶
这篇文章主要介绍了解决vue中reader.onload读取文件的异步问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
reader.onload读取文件的异步问题
问题
用element上传文件组件上传文件，然后在前端读取，由于reader.onload读取文件是异步的会造成return回去的数据无法被获取
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
}
})
}在外部调用该函数：
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异步返回结果问题
原本想直接return，但因为read.onloadend是异步任务，无法获取到。
因此可以使要读取文件的函数返回值为一个promise，这样便可解决这一问题。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了如何通过vue3和vite实现在线预览pdf功能,文中的示例代码简洁易懂,具有一定的借鉴价值,感兴趣的小伙伴可以学习一下2023-10-10
vue高德地图，带你玩转周边，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要给大家介绍了关于Vue3中emits与attrs区别的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2021-10-10
这篇文章主要给大家介绍了关于vue3 Table分页保留选中状态的相关资料,vue table组件是一个非常方便的表格组件,它可以帮助我们实现分页和选中功能,需要的朋友可以参考下2023-08-08
当我们未设置keepAlive的最大缓存数时,当缓存组件太多,会导致内存溢出,本文给大家介绍了vue3手动删除keepAlive缓存的方法,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-03-03
本文主要介绍了vue中el-table多层级嵌套的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-10-10
这篇文章主要为大家详细介绍了vue简易记事本的开发过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
下面小编就为大家分享一篇基于vue-cli 打包时抽离项目相关配置文件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了在vant中如何使用dialog弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue中的install方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论