美文网首页
Vue input[type=file]上传图片并转为base6

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

作者: __鹿__ | 来源:发表于2020-08-25 09:38 被阅读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);
            }
      },
}

相关文章

网友评论

      本文标题:Vue input[type=file]上传图片并转为base6

      本文链接:https://www.haomeiwen.com/subject/wrsajktx.html