Js FileReader图片加载，预处理本地缓存图片

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

一、FileReader是什么？

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

二、使用步骤

html

<a-upload
accept=".jpg, .jpeg, .png"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:beforeUpload="imgChange"
>
<!-- <div v-if="imageUrl">
  <a-icon type="close" @click.stop="delImage" />
  <img :src="imageUrl" alt="avatar" />
</div>-->
<div :class="{'img-modal':imgModal}" ref="imgModal">
  <a-icon type="delete" class="delete-icon" @click="hanldeDeleteImg" />
</div>

//重点代码片段，是将reader预览的结果赋值给img的src实现
<img
  v-show="imageUrl"
  :src="cosUrl + '/avator/' + userId + '.jpg'"
  alt="avatar"
  id="loaclImg"
  ref="loaclImg"
/>


<div v-show="!imageUrl">
  <a-icon type="plus" />
  <div class="ant-upload-text">选择文件</div>
</div>
</a-upload>

js

//获取文件名字的后缀名
const prefix = img.name.split('.')[1]
if (prefix !== 'jpg' && prefix !== 'jpeg' && prefix !== 'png') {
  this.$message.error('只支持jpg，png，jpeg图片格式')
  return
}
//创建读取文件的对象
const reader = new FileReader()
//调用对象的方法
reader.addEventListener('load', () => {
  img.size / 1024 < 500 && img.size / 1024 > 5
    ? ((this.fileData = img), (this.imageUrl = reader.result))
    : this.$message.error('文件上传大小限制在5k-500k!')
})
//缓存
reader.readAsDataURL(img)
reader.onload = () => {
  this.$refs.loaclImg.src = reader.result
}

总结

good afternoon