vue實現選擇圖片檔案後預覽

利用h5的api可以實現選擇檔案並實現預覽

readAsDataURL

方法會讀取指定的 Blob 或 File 物件。讀取操作完成的時候，readyState 會變成已完成DONE，並觸發 loadend 事件，同時 result 屬性將包含一個data:URL格式的字串（base64編碼）以表示所讀取檔案的內容

方式引入vue檔案

<script src="./vue.js"></script>

檔案選擇框,並新增change事件，和dom操作ref

 <input type="file" @change="uploadImg" ref="img" />

新增一個用於顯示預覽的img標籤

<img id="img" />

例項化vue並完成操作

var vm = new Vue({
        el: '#app',
        methods: {
        //change事件
            uploadImg(el) {
                //根據ref得到圖片檔案
                var file = this.$refs.img;
                //使用h5的讀取檔案api
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                //讀取完成後觸發
                reader.onload = function () {
                //改變img的路徑
                    document.querySelector("img").src = this.result;
                };
            }
        },
    })

效果

完整程式碼