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
}