首页 > 其他分享 >vue的上传图片

vue的上传图片

时间:2023-02-06 13:34:10浏览次数:40  
标签:vue console log data let reader 上传 myimg 图片

<!-- 上传 -->
                    <input type="file" ref="myfile1" @change="readImg1" id="fileImg1">

data(){
    return {
        url:'',
    }
}

readImg1: function() {
                let myfile = this.$refs.myfile1;
                console.log(myfile);
                let myimg = myfile.files[0];
                console.log(myimg);
                // 原生JS读取文件的内置对象
                let reader = new FileReader();
                // 把文件路径提供给文件读取工具
                reader.readAsDataURL(myimg);
                // onl oad,文件读取成功完成时触发
                reader.onload = e => {
                    // target,返回触发此事件的元素(事件的目标节点)。
                    let data = e.target.result;
                    console.log(data);
                    this.url = data;
                }
            },

 

标签:vue,console,log,data,let,reader,上传,myimg,图片
From: https://www.cnblogs.com/liweimingbk/p/17095121.html

相关文章