HTML部分
<div class="file"><input type="file" class="updata" accept="image/*" @change="change($event)" ref="updata"><img :src="imageUrl ? imageUrl : baseImg" alt="" class="img"></div>
这里的 img使用了动态绑定src 如果上传了图片就显示上传的图片，如果没有上传图片，就显示默认的图片
js代码
<script>export default {data() {return {// 上传的图片imageUrl: '',// 默认的图片baseImg: ''}},methods: {change(e) {console.log(e.target.files[0].name);// 判断是不是规定格式// let name = e.target.files[0].name// 获取到第一张图片let file = e.target.files[0]// 创建文件读取对象var reader = new FileReader()var that = this // 将文件读取为DataURLreader.readAsDataURL(file)// 读取成功调用方法reader.onload = e => {console.log('读取成功');// e.target.result 获取 读取成功后的 文件DataURLthat.imageUrl = e.target.result// 如果要将图片上传服务器，就在这里调用后台方法}}},created() {// 获取默认显示的图片this.baseImg = require('./pic/1.jpg')},mounted() {}}</script>
样式部分
<style>.file {position: relative;width: 200px;height: 150px;background-color: #ccc;}.updata {display: block;height: 100%;width: 100%;opacity: 0;position: absolute;top: 0;left: 0;z-index: 10;}.img {position: absolute;top: 0;left: 0;width: 200px;height: 150px;}</style>
最后效果
没有上传图片---- 显示默认的图片
上传图片 ----- 显示上传的图片
