input type="file" 预览图片

需要注意的地方：

1.input标签添加multiple="multiple"，可一次上传并预览多张图片。
2.文件读取器：new FileReader()

<template>
    <div>
        上传图片:

        <!-- 每次只上传一张照片，且展示在页面上。 -->
        <input type="file"  @change="uploadFun">
        <img alt="" id="img">

        <div style="height:300px;clear:both"></div>


        <!-- 可一次性上传多个照片，并且展示在页面上 -->
        <input type="file" multiple="multiple"  @change="uploadFunMore">

        <img alt="" v-for="(url,urlIndex) in more_length" :key="urlIndex" :id="'imgMore' + urlIndex">

    </div>
</template>
<script>
export default {
    data(){
        return{
            more_length:0,
        }
    },
    mounted(){

    },
    methods:{
        uploadFun(event){
            console.log(event,'123')
            var file = event.target.files[0];
            // 新建文件读取器
            let reader = new FileReader();
            // 使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里
            reader.readAsDataURL(file);
            reader.onload = function(e){
                //  e.target.result = data:image/jpeg;base64,/9j/4AAQSk
                document.getElementById('img').src = e.target.result;
            }
                //兼容ie的写法
                //this.option.img= URL.createObjectURL(file)
        },
        /* 多个照片循环展示 */
        uploadFunMore(event){
            this.more_length = event.target.files
            for (let i=0;i<this.more_length.length;i++){
                var file = event.target.files[i];
                // 新建文件读取器
                let reader = new FileReader();
                // 使用readAsDataURL会返回一个url,这个值就保存在事件对象的result里
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    document.getElementById('imgMore'+i).src = e.target.result;
                }
            }
        }     
    }
}
</script>
<style scoped>
img{
    width: 300px;
}
</style>