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);
            }
      },
}