function imgbase(file) {
return new Promise((resolve) => {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
resolve(this.result);
});
const img = await imgbase(file);
console.log(img);
打印的结果如下
该方法的用途：用于在加载完成后执行相应的代码，相当于一个缓冲时间。
遇到问题的情况；调用readAs...之类的函数时，调用语句在load的前面。
出现问题的原因：读完数据后没有绑定上回调函数。
解决方法：把读数据的函数readAsBinaryString()之类的函数，放在回调函数的后面。
修改前的代码如下：
reader.readAsDataURL(image);
reader.onload = function(){
let bi = this.result;
demo.src
1 关于异步操作的一些概念
虽然JavaScript引擎拥有多个线程，但是单个脚本只能在一个线程上运行，也就是说，JavaScript只能同时执行一个任务，其他的任务则必须在当前任务后面排队等待，这被称之为单线程模型。
在JavaScript中，程序里的任务可以被分为两类：同步任务和异步任务。
同步任务（synchronous）：即在主线程上执行的任务，并且之所以同步，是因为只有执行完前一个任务才能执行后一个任务。
异步任务（asynchronous）：说白了就是被JavaScript引擎放进任务队
实现一个File-Reader组件用来读取本地资源。
概述： 在用户手动上传一些资源的时候，需要分为两步，第一步是将其从本地读取出来，得到一个file对象，然后再上传至服务器。该组件用于第一步，然后可通过后续进一步封装程Upload组件。
该组件的痛点在于：
添加拖拽上传的功能；
本地文件的批量读取，以及相关预览；
相关浏览器的默认行为的preventDefault；
相关文件的基本校验。...
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 =
fileReader的load事件是异步的 通过promise使其同步加载
export const loadFileAsync = (file: File): Promise<string | ArrayBuffer> =>
new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.o
因为想统一通过base64传输gif文件，所以在不能通过canvas重绘修正并得到base64编码的情况下，我选择使用FileReader()来获取gif文件的base64编码，但是有个问题困扰了我很久:
readasbase64(file){
// return new Promise(function(resolve, reject) {
// ...
onloadstart：读取文件开始时触发
onprogress：读取过程中触发，会返还本次读取文件的最大字节数和已经读取完毕的字节数，可以用来做进度条
onabort：在读取中断时触发
onerror...
在Vue中使用FileReader是一种常见的处理文件操作的方式。FileReader是JavaScript中的一个内置对象，它提供了一种异步读取文件内容的方法。
要在Vue中使用FileReader，首先需要在Vue组件中引入FileReader对象。可以在组件的`<script>`标签中添加以下代码：
```javascript
import FileReader from 'filereader';
export default {
// ...
接下来，可以在Vue组件的方法中使用FileReader进行文件读取操作。例如，如果想要读取用户上传的文件，可以使用以下代码：
```javascript
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = () => {
// 文件读取成功后的回调处理
const fileContent = reader.result;
console.log(fileContent);
reader.onerror = () => {
// 文件读取失败后的回调处理
console.error('文件读取失败');
reader.readAsText(file);
上述代码中，`handleFileUpload`方法会在用户选择文件后被调用。它首先获取用户选择的文件，然后创建一个FileReader对象。接着，通过设置`onload`和`onerror`事件处理程序来处理文件读取成功和失败的情况。最后，调用`readAsText`方法来开始读取文件内容。
注意：上述代码仅演示了如何读取文本文件内容，如果需要读取其他类型的文件（例如图片或二进制文件），可以使用FileReader提供的其他方法（如`readAsDataURL`或`readAsArrayBuffer`）来实现。
