HTML部分
div class=' file ' input type=' file ' class=' updata ' accept=' image/* ' @ change=' change ($ event ) ' ref=' uent div这里的img在使用动态绑定src上传图像时显示上传的图像，在未上传图像时显示默认图像
js代码
scriptexportdefault { data (} { return {//上传的图像imageUrl: '，//默认的图像baseImg: '' } }， methods: { change(e ) ) e} //判断是否为规定的格式//let name=e.target.files [0].name//获取了第一张图像的let file=e 文件读取目标varreader=newfiler var that=this//文件dataurlreader.readasdataurl (file ) /读取成功的调用方法reader.onload=//e.target.result如果要将成功读取的文件dataurlthat.imageurl=e.target.result//图像上传到服务器，请在此调用后台方法获取默认显示的图像this.baseimg=require ) (/pic/1.jpg ) }，mounted ) }/scripthttp://www.Sina.com
syle.file { position : relative； width: 200px； height: 150px； 背景色： # CCC； } .updata { display: block； height: 100%； width: 100%； opacity: 0； 位置： absolute； top: 0； left: 0； z-index: 10； } .img { position: absolute； top: 0； left: 0； width: 200px； height: 150px； (}/style 样式部分
未上传图像----显示默认图像
上传图像-----显示上传的图像