首页 > 网络编程 > JavaScript > javascript类库 > vue.js > reader.onload读取文件异步问题

解决vue中reader.onload读取文件的异步问题

作者:十二点的洛杉矶

这篇文章主要介绍了解决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,这样便可解决这一问题。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
  • vue.js出现Vue.js not detected错误的解决方案
    vue.js出现Vue.js not detected错误的解决方案
    2022-09-09
  • 在Vue中使用Avue、配置过程及实际应用小结
    在Vue中使用Avue、配置过程及实际应用小结
    2022-10-10
  • vue中的事件触发(emit)及监听(on)问题
    vue中的事件触发(emit)及监听(on)问题
    2022-10-10
  • 关于el-table-column的formatter的使用及说明
    关于el-table-column的formatter的使用及说明
    2022-10-10
  • vue和iview结合动态生成表单实例
    vue和iview结合动态生成表单实例
    2022-10-10
  • Vue enter回车导致页面刷新问题及解决
    Vue enter回车导致页面刷新问题及解决
    2022-10-10
  • vue2项目中全局封装axios问题
    vue2项目中全局封装axios问题
    2022-10-10
  • Vue项目中安装使用axios全过程
    Vue项目中安装使用axios全过程
    2022-10-10
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2023 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号