vue中reader.onload读取文件的异步问题_filereader.onload 同步

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
vue中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);
                    vue中reader.onload读取文件的异步问题问题用element上传文件组件上传文件，然后在前端读取，由于reader.onload读取文件是异步的会造成return回去的数据无法被获取export function import_excel_to_json(file){    let jsonData = {}    let reader = new FileReader()    reader.readAsArrayBuffer(file)    reader.onload =  
				👨 作者简介：大家好，我是Taro，前端领域创作者
✒️ 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ⭐️收藏通常我们在前端遇到读写服务端文件时，会遇到此类问题
二、解决方法
1. 改变this指向
2. 利用Promise
单独封装返回Promise对象的uploadFile函数，把文件流传给，然后通过  方法拿到返回结果
三、为什么直接赋值失败
很简单：在如上的代码示例中，  这里,this并没有按照大家想的那样指向 实例，而是指向了 函数的调用者：reader，所以导致给外部
				fileReader的load事件是异步的 通过promise使其同步加载
export const loadFileAsync = (file: File): Promise<string | ArrayBuffer> =>
  new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.o
handleChange(file) {
	  let reader = new FileReader();   //先new 一个读文件的对象 FileReader
	   if (typeof FileReader === "undefined") {  //用来判断你的浏览器是否支持 FileReader
	       this.$messag
				1 关于异步操作的一些概念
虽然JavaScript引擎拥有多个线程，但是单个脚本只能在一个线程上运行，也就是说，JavaScript只能同时执行一个任务，其他的任务则必须在当前任务后面排队等待，这被称之为单线程模型。
在JavaScript中，程序里的任务可以被分为两类：同步任务和异步任务。
同步任务（synchronous）：即在主线程上执行的任务，并且之所以同步，是因为只有执行完前一个任务才能执行后一个任务。
异步任务（asynchronous）：说白了就是被JavaScript引擎放进任务队
				该方法的用途：用于在加载完成后执行相应的代码，相当于一个缓冲时间。
	遇到问题的情况；调用readAs...之类的函数时，调用语句在load的前面。
	出现问题的原因：读完数据后没有绑定上回调函数。
	解决方法：把读数据的函数readAsBinaryString()之类的函数，放在回调函数的后面。
修改前的代码如下：
reader.readAsDataURL(image);
	reader.onload = function(){
	  let bi = this.result;
	  demo.src
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e) {
          PostBatchUpload...
				const promise = new Promise((resolve: Function, reject: Function) => {
	if (this.fileInfo !== undefined) {
		const reader: FileReader = new FileReader();
		reader.readAsText(files[0], 'utf-8');
				Vue中document.body.scrollTop的值总为零的解决办法
最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0
但是发现document.body.scrollTop一直是0。
查资料发现是DTD的问题。
页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。
页面没有DTD，即没指定DOCTYPE时，使用document.body。
IE和Firefox都是如此。
以上这篇解决VUE中document.body.scrollTop为0的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，
				`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。
该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局方法。例如，你可以使用这个文件来创建全局的 Vue 实例，定义全局组件，添加全局指令，以及访问全局的 mixin、过滤器、插件等。
具体来说，`vue.global.js` 文件定义了以下内容：
1. `Vue` 对象：全局范围的 Vue 构造函数，用于创建 Vue 实例。
2. 全局方法：如 `Vue.createApp`、`Vue.component`、`Vue.directive` 等，用于定义组件、指令等全局内容。
3. 全局属性：如 `Vue.config` 用于配置全局行为，`Vue.version` 用于获取 Vue 的版本号。
4. 全局混入：使用 `Vue.mixin` 可以在所有组件中混入指定的选项。
5. 全局过滤器：使用 `Vue.filter` 可以定义全局过滤器。
6. 全局插件：使用 `Vue.use` 可以注册
      console.log('文件', file)
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
				### 回答1：
在Vue中使用window.onload的方法是在mounted生命周期钩子函数中使用，因为在这个时候DOM已经加载完成。可以使用window.onload = function(){}或者window.addEventListener('load', function(){})来监听window的load事件，然后在回调函数中执行需要的操作。需要注意的是，如果在组件中使用window.onload，最好在组件销毁时移除事件监听，避免内存泄漏。   
### 回答2：
Vue 中的 window.onload 主要被用于在页面加载完成后执行一些操作，例如渲染页面元素，绑定事件等。下面我们来详细了解一下在 Vue 中如何使用 window.onload。
在 Vue 中，通常是将 window.onload 加入到组件的 mounted 生命周期中，即当该组件被挂载到 DOM 中完成之后执行。但是需要注意的是，如果在一个应用中存在多个组件，那么每个组件都会触发 mounted 生命周期，这就导致 window.onload 事件会多次触发。
为了避免对渲染性能造成不良影响，我们可以使用 v-cloak 指令或者 Vue 自带的 transition 来解决该问题。通过 v-cloak 指令，可以将未编译完成的 Vue 模板隐藏起来，等到渲染完成后再显示出来。而通过 transition，可以在模板渲染完成之后再执行一些动画效果。
另外，在 Vue 中使用 window.onload 还需要注意一个问题，即同步的数据并不会在 window.onload 中得到更新。因为 window.onload 是在 DOM 加载完毕后执行的，而 Vue 的数据是异步更新的，这就导致同步的数据在 window.onload 事件中并没有被渲染出来。因此，我们可以使用 Vue 提供的 nextTick 方法在 DOM 更新完成之后再执行一些操作。
综上所述，在 Vue 中使用 window.onload 事件需要注意多种问题，需要结合 Vue 的生命周期、渲染性能、数据更新等多个因素来考虑。在具体的实践中，应该灵活运用这些技巧来处理不同的情况。   
### 回答3：
Vue是一款流行的JavaScript框架，用于构建响应式的Web应用程序。Vue不能与传统的window.onload事件一起使用，因为Vue应用不是在window.onload事件发生后加载的。相反，Vue应用是在DOM树准备就绪后的Vue实例创建过程中加载的。因此，使用window.onload事件加载Vue应用是不必要的。
Vue提供了一种称为“生命周期挂钩”的方式来在特定时刻执行代码。在Vue实例创建并加载期间，Vue提供了一些生命周期钩子，可以在这些钩子中编写代码来执行特定的任务。
在Vue中，可以使用created或mounted钩子来执行代码。created钩子用于在Vue实例创建后立即执行代码。mounted钩子在Vue实例挂载（即将显示在DOM中）后执行代码。如果需要在Vue加载后执行代码，应该使用mounted钩子而不是window.onload事件。
下面是一个使用mounted钩子的示例：
<template>
    <h1>Hello World</h1>
</template>
<script>
export default {
  mounted() {
    console.log('Vue app loaded');
    // 在这里执行其他任务
</script>
在这个Vue组件中，当Vue实例加载完毕后，mounted钩子会被调用并执行console.log语句。在此之后，可以在这个钩子中执行其他任务。
总之，在Vue中，应该使用created或mounted钩子来执行代码，而不是使用window.onload事件。这可以确保在Vue应用程序加载时正确地执行代码。