vue 踩坑日志之 FileReader 无法抛出值

  问题：

         在vue 中我上传文件后试图通过reader.readAsText(file)来读取文本内容，结果在reader.onload() 中能够正常显示，但是将之抛给外部变量时，却无法读取到。

            handleFileChange(file) {
                const reader = new FileReader();
                reader.readAsText(file)
                reader.onload = () => {
                    this.file = reader.result;
                };
                console.log(this.file)  // 不显示reader 值
            },

 

  原因：

         reader.readAsText(file) 需要时间读取 此处产生了异步，使得传参赋值还未完成故外部的变量值未得到修改。

  解决方法一(错误)：

             通过setTimeout() 形式等待this.file 得到处理。

              结果。。。。。。 整个程序都停止，没有任何变化 。

解决方法二(正确):

        采用reader.onloadend() = () => {} 回调函数，即等readAsText()完成后进行以下操作。

            handleFileChange(file) {
                const reader = new FileReader();
                reader.readAsText(file)
                reader.onloadend = () => {
                    this.file = reader.result;
                };
                console.log(typeof this.file) // String 
            },