js读取图片文件

<template>
<div ref="load">
<input type="file"
ref="fileBtn"
@change="uploadImg" />
<img :src="url"
class="img"
ref="img" />

</div>
</template>
<script>
import _ from 'lodash';

export default {
data() {
return {
url: '',
};
},
mounted() {},
methods: {
async uploadImg() {
const inputFile = await this.$refs.fileBtn.files[0];
let res;
if (inputFile) {
if (inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif') {
alert('不是有效的图片文件！');
return;
}
const reader = new FileReader();
reader.readAsDataURL(inputFile);
reader.onloadend = () => {
this.url = reader.result.substring(0);
};
} else {
return;
}
},
},
};
</script>
<style scoped lang="less" >
</style>