美文网首页
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