vue踩坑记录：reader.onload中的值无法被外面读取到，异步问题解决

项目问题

项目需要自己写一个页面读取本地上传的图片文件，读取文件的名字和base64编码，作为入参传入接口，调取OCR识别接口，完成图片转文字。上传文件之后，用reader.readAsDataURL(file);读取转换为base64编码，用reader.onload = (event) => {this.base64Image =event.target.result;};之后发现并没有成功赋值。

HTML页面

<div class="flex-full planTable">
    <div class="search_filter">
        <div class="toolbar_txt">
            <el-page-header title="" content="OCR工具"></el-page-header>
        </div>
        <div>
            <el-button @click="go('/planDraftManage/draftManageList')" icon="el-icon-arrow-left" type="primary" plain>返回
            </el-button>
        </div>
    </div>
    <div>
        <input type="file" id="file" accept="image/*" :class="temp.style.chooseFile"  @change="chooseFile">
        </input>
        <p id="fileInfo" :class="temp.style.imgInfo">(jpgjpeg,png格式,上传附件大小10M以内)</p>
        
        <el-button @click="OCRIdentify" type="primary" :class="temp.style.OCRCertain">OCR识别
        </el-button>
    </div>
    <div>
        <el-input type="textarea"
        :rows="20" v-model="OCRText" :class="temp.style.OCRText"></el-input>
    </div>
</div>

处理函数

chooseFile选择文件， toBase64(file)base64数据处理。

toBase64(file){
    const that=this;
    const reader = new FileReader();
    reader.onload = (e) =>{
        this.base64Image = event.target.result;//赋值给base64Image，发现这里能获取到数据
    } 
    reader.readAsDataURL(file);
  }
chooseFile(event) {
    const that = this;
    const file = (event.target as HTMLInputElement)?.files?.[0];
    if (!file) {
      console.error('No file selected');
      return;
    }
    this.imgName = file.name;
    this.toBase64(file);
    console.log(this.base64Image)//这里获取不到数据，this.base64Image为空
  }

问题

reader.onload产生了异步问题，传参赋值还未完成，导致外面获取不到数据。

解决：用Promise和await完美解决

修改toBase64(file)函数，返回一个Promise

toBase64(file){
    const that=this;
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = (e) =>{
        resolve(e.target.result);
      } 
      reader.onerror = (error) => reject(error);
      reader.readAsDataURL(file);
    });
  }

chooseFile改为await赋值给this.base64Image

async chooseFile(event) {
    const that = this;
    const file = (event.target as HTMLInputElement)?.files?.[0];
    if (!file) {
      console.error('No file selected');
      return;
    }
    this.imgName = file.name; // 设置文件名称
    this.base64Image=await this.toBase64(file);//这里可以成功获取到数据
  }

this.base64Image可以成功获取到数据啦~

成果