FileReader初步使用實現上傳圖片預覽效果

Castiel_Z發表於2019-03-04

FileReader 作為檔案處理讀取器現在用處相對多一些。初次使用作為上傳預覽例項

  • 首先要有input 和img
<img :src="upImg" alt=""> //屬性繫結為upImg在data()中聲名
<input class="lost" type="file" id="file" @change="upLoadImg($event)" ref="file">
複製程式碼

屬性有點多因為我這個是vue的專案所以有用到ref，jq的話就可以直接用id 來查詢元素進行事件的繫結和更改

  • 然後寫繫結的事件來更新檢視的img
upLoadImg(e) {
            
            let that = e.target                 //儲存當前的input元素
            let fr = new FileReader()           //初始化
            fr.readAsDataURL(e.target.files[0]) //選擇檔案中的頭一個開始讀取,將img讀取為base64編碼可以被img直接解析
            fr.onload = e => {                  //在filereader中讀取完畢開始非同步載入
                this.upImg = e.target.result

                that.value = null               //解決change事件重複選擇同一檔案是不能重新渲染載入事件
            }
        }
複製程式碼

這樣fileReader就將img讀取為base64的編碼,這個跟在初始化vue專案後在本地載入圖片是想要直接在img標籤中引用,是需要在script中進行require就是將其轉化為base64的編碼再有vue渲染到img的src中的.

ps:input file 不能任意更改樣式這是很鬱悶的,所以更新思路來解決

  • 所以我們們首先要隱藏input file 將其display設為none
 <span @click="upLoadClick($event)" class="upload">
    哪裡不會點這裡
    <input class="lost" type="file" id="file" @change="upLoadImg($event)" ref="file">
 </span>
<script>
    upLoadClick(e) {
            e.click = this.$refs.file.click()
            console.log(this.$refs);
        },
</script>
<style lang=`stylus` scoped>
.lost //stylus 就是這麼省略...
    display none
</style>
複製程式碼

這樣將input file的點選事件幫給了 .upload

這樣我們就可以愉快的上傳了,去試試,可以做到圖片預覽了沒,最後還是最好把圖片的樣式給規定下,太大的站位會影響整體佈局的.

相關文章