本地预览图片,并获取图片的基于base64的二进制流
@[TOC](本地预览图片,并获取图片的基于base64的二进制流) ***HTML代码******JS代码***
HTML代码
<el-form-item label="上传学校主图:"><input type="file" ref="fileBtn" @change="uploadImg" /><img :src="imgSrc" class="img" ref="img" /></el-form-item>
JS代码
data(){return {imgInfo: null,imgSrc: null}}, methods: {async uploadImg() {var that = this;const inputFile = await this.$refs.fileBtn.files[0];let res;console.log('选了图片');console.log(inputFile);this.inputFile = inputFile;if (this.inputFile) {let inputFile = this.inputFile;if (inputFile.type !== 'image/jpeg' && inputFile.type !== 'image/png' && inputFile.type !== 'image/gif') {alert('不是有效的图片文件！');return;}this.imgInfo = Object.assign({}, this.imgInfo, {name: inputFile.name,size: inputFile.size,lastModifiedDate: inputFile.lastModifiedDate.toLocaleString()});console.log(this.imgInfo);const reader = new FileReader();res = reader.readAsDataURL(this.inputFile);console.log('我想想要获取流');reader.onloadend = function() {// var strBase64 = reader.result.substring(84);var strBase64 = reader.result.substring(0);console.log(strBase64);};reader.onload = function(e) {console.log(e);that.imgSrc = this.result; // 注意:这里的this.result中,这个this不是vue实例,而是reader对象,所以之前用that接收vue示例 that.imgSrc };} else {return;}}}
