版权声明:未经本人同意不得私自转载 https://blog.csdn.net/qq_40190624/article/details/83411123
注意:
1.this.$el.querySelector('.hiddenInput') 是获取文档中 class=”hiddenInput” 的元素。
2.在打开文件夹选中图片确认后,执行handleFile函数
3.let $target = e.target || e.srcElement 表示调用他的各种属性,
两个的区别是:ie下支持e.srcElement,ff支持e.target。
4.由于手机上可以选择多张图片,所以let file = $target.files[0],表示取第一张图。
5.var reader = new FileReader() FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲
区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
6.onload 事件会在页面或图像加载完成后立即发生。
7.FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。
<template>
<div class="add-person">
<div class="accomplish" @click="accomplish">完成 </div>
<ul class="person-info">
<li>
<div class="photo" @click.stop="uploadHeadImg">
<!-- <img :src="imgSrc"> -->
<img :src="userInfo.avatar" />
<span class="img-title">头像</span>
</div>
<input type="file" accept="image/*" @change="handleFile" class="hiddenInput" />
<ul class="content">
<li v-for="items in list">
<span class="title">{{items.title}}</span>
<input type="text" class="title-con" v-model="items.conent">
</li>
</ul>
</li>
</ul>
<ul class="contact-way"></ul>
</div>
</template>
<script>
export default {
data() {
return {
datas: new FormData(),
userInfo: {
avatar:
"https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=62d46c39067b020818c437b303b099b6/d4628535e5dde7119c3d076aabefce1b9c1661ba.jpg"
},
imgSrc: require("../../../assets/img/Path.png"),
list: [
{
title: "姓名",
conent: "carrie"
},
{
title: "公司",
conent: "微达安"
},
{
title: "职位",
conent: "web开发工程师"
},
{
title: "手机",
conent: "18319566585"
},
{
title: "邮箱",
conent: "[email protected]"
},
{
title: "座机",
conent: "0755-5468759"
}
]
};
},
methods: {
accomplish() {
console.log(`完成`);
},
uploadHeadImg() {
// 点击的时候触发input打开图片上传的点击事件
this.$el.querySelector(".hiddenInput").click();
},
// 将头像显示
handleFile(e) {
//获取当前点击事件的target元素对其进行兼容
let $target = e.target || e.srcElement;
// 取第一个元素
let file = $target.files[0];
/**
* 使用FileReader对象,
* web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,
* 可以使用File对象或者Blob对象来指定所要处理的文件或数据。
* */
var reader = new FileReader();// //读取本地文件,以gbk编码方式输出
reader.onload = data => {//成功读取后
console.log(data)
let res = data.target || data.srcElement;
// //读取完毕后输出结果
this.userInfo.avatar = res.result;
};
reader.readAsDataURL(file);
}
}
};
</script>
css:
<style lang="less" scoped>
.accomplish {
display: inline-block;
position: fixed;
right: 0.506667rem;
top: 0.193333rem;
z-index: 166;
color: #fff;
font-size: 0.426667rem;
}
.person-info,
.contact-way {
}
.person-info {
margin-top: 1.466667rem;
border-bottom: 1px solid rgb(229, 229, 229);
.content {
li {
background-color: #fff;
width: 100%;
padding: 0.266667rem 0;
padding-left: 0.666667rem;
border-top: 1px solid rgb(229, 229, 229);
}
li:first-child > .title {
color: rgb(51, 51, 51);
}
li:nth-child(4) {
margin-top: 0.266667rem;
}
li:nth-child(4) > .title,
li:nth-child(5) > .title {
color: rgb(51, 51, 51);
}
.title {
font-size: 0.426667rem;
color: rgb(153, 153, 153);
}
.title-con {
font-size: 0.373333rem;
color: rgb(153, 153, 153);
margin-left: 0.266667rem;
}
}
}
.person-info > li {
// padding-left: .666667rem;
padding-top: 0.266667rem;
}
.photo {
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items: center;
padding-bottom: 0.266667rem;
background-color: #fff;
padding: 0.4rem;
img {
width: 1.333333rem;
height: 1.333333rem;
}
.img-title {
margin-right: 0.4rem;
color: rgb(102, 102, 102);
font-size: 0.426667rem;
}
}
.hiddenInput{
display: none;
}
</style>