图片上传前预览的功能

Posted 2020-11-20 goloving

　　最近自己想做一个项目，涉及到很多图片上传和预览的功能，所以简单记录下：

　　这里我没有用vue的组件库，是单纯靠input来写出一个图片上传的功能。

　　思路是：先用input[type=file]来获取本地的图片，然后用html5的 File API 的 FileReader 图片本地转成base64格式的url，把这个url赋值到用于预览的src就好了。

    <div class="upload">
        <div class="img-container">
            <img :src="src" alt="user image" height="100%" width="100%">
        </div>
        <input type="file" @change="getFile" ref="file" id="file">
        <label for="file"><i class="el-icon-plus"></i></label>
    </div>

　　input的type=file的样式很丑，所以需要改下，通常采用label for然后改label的样式

.upload {
    .img-container{
        width 100px
        height 100px
    }
    label { 
        width: 100px; 
        height:100px;
        display:inline-block;
        border-radius: 2px; 
        text-align: center; 
        font-size: 30px; 
        border:2px solid #ddd;
        i{
            line-height 100px
        }
    } 
}
input[type=‘file‘] { 
    display: none; 
}

　　我给图片先默认显示一个图片

    data(){
        return {// 转base64码后的data字段
            src: ‘../../../static/image/dl.jpg‘ //先设置一个默认图片
        }
    },

　　默认图片效果：

　　然后点击选择图片，调用方法：

    methods:{
        getFile (e) { 
            let _this = this 
            var files = e.target.files[0] 
            if (!e || !window.FileReader) return // 看支持不支持FileReader 
            let reader = new FileReader() 
            reader.readAsDataURL(files) // 这里是最关键的一步，转换就在这里 
            reader.onloadend = function () { 
                _this.src = this.result 
            }
        }
    }

　　比较简单，上面只是预览，改了下样式，还有上次服务器，还有比如压缩图片大小，这几天会慢慢研究。