該例簡單實(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ù)覽