项目问题
项目需要自己写一个页面读取本地上传的图片文件,读取文件的名字和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
可以成功获取到数据啦~
成果