template部分
<div v-if="!form.imgVal" class="ad-img-wrap" @click="changeImageHandler"> <span class="iconfont iconjiahao"></span> </div> <img v-else class="ad-img-wrap" :src="form.imgVal" alt="" accept="image/*"> <input type="file" @change="changeImgHandler($event)" ref="adImg" style="display: none;" accept="image/*">
script部分
data(){ return{ form:{ imgVal: null } } } methods:{ changeImageHandler () { this.$refs.adImg.dispatchEvent(new MouseEvent('click')) }, changeImgHandler (e) { let fileName = this.$refs.adImg.value let list = fileName.split('.') let type = list[list.length - 1] let flag = false for (let i = 0; i < imgFormat.length; i++) { if (imgFormat[i] === type) flag = true } if (!flag) { this.$message({ message: '请选择图片', type: 'warning' }) return false } this.form.imgVal = this.getImg(e.target.files[0]) // 图片地址 }, getImg (file) { let url = '' if (window.createObjectURL !== undefined) { // basic url = window.createObjectURL(file) } else if (window.URL !== undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) } else if (window.webkitURL !== undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) } return url } }