Vue input[type=file]上传图片并转为base6

2020-08-25  本文已影响0人  __鹿__

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);
            }
      },
}
上一篇下一篇

猜你喜欢

热点阅读