該例簡(jiǎn)單實(shí)現(xiàn)了圖片的預(yù)覽
- template處
<div class="preview" @click="handleClick()">
<img :src="course.cover" class="course-cover" v-if="!show" />
<div class="icon-plus">
<img src="../assets/plus.png" v-if="show" />
</div>
<input type="file" @change="getFile($event)" style="display: none;" id="coverFile" />
</div>
- methods處
//點(diǎn)擊圖片預(yù)覽區(qū)谨垃，即模擬點(diǎn)擊文件選擇組件
handleClick: function() {
document.getElementById('coverFile').click();
},
//圖片預(yù)覽
getFile: function() {
this.file = event.target.files[0];
var windowURL = window.URL || window.webkitURL;
this.course.cover = windowURL.createObjectURL(this.file);
this.show = false;
}
-
運(yùn)行結(jié)果
1.png
2.png
- 此處單擊加號(hào)處可以選擇圖片進(jìn)行預(yù)覽
