父组件
<div class="uploadFile">
<uploadFile v-model="uploadImg" ref="loadImg" uploadImg="uploadFileImg"/>
</div>
子组件
<template>
<div class="upload">
<div class="content">
<label class="lable">
<span v-text="$lang.inputQRcode"></span>
<input class="hide" type="file" accept="image/jpg,image/jpeg,image/png" @change="getFiles($event)">
</label>
<div class="img" v-if="isImg">
<img :src="_backgroundimg" v-if="_backgroundimg">
</div>
</div>
</div>
</template>
getFiles(event) {
this.isImg = true;
let reads = new FileReader();
if (event.srcElement.files) {
if (event.srcElement.files.length > 0) {
let fileSize = 0;
let files = event.srcElement.files[0];
if (files.size) {
fileSize = Number(files.size / 1024 / 1024).toFixed(2); //单位为MB
}
if (fileSize > 5) {
console.log（“图片尺寸过大”）
});
return false;
}
// var windowURL = window.URL || window.webkitURL;
this.src = window.URL.createObjectURL(event.srcElement.files[0]);
this.file = files;
this.uploaded = this.src
console.log("文件",this.src)
}
}
},
上传图片
原文地址：https://www.cnblogs.com/lingshan168/p/9409302.html