Vue input[type=file]上传图片并转为base64预览

input[type = file] 文件 转换 base64地址,再渲染到页面上。

 <div class="updatePhoto">
        {{userPhoto }}
        <input class="addPicInput" id="userAvatar" type="file"   ref="uploadFile" @change="fileChange($event)" accept="image/*" multiple>
</div>
export default {
    data() {
        return {
            userPhoto: "",
        };
    },
    methods: {
      fileChange(event) {
            var that = this
            var files = document.getElementById("userAvatar").files[0]
            var reader = new FileReader();
            reader.onloadend = function () {
                that.userPhoto = reader.result;
                console.log(reader.result)
            };
            if (files) {
                reader.readAsDataURL(files);
            }
      },
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。