提示:防止以后忘了不好找就记录下来
前言
提示:这里会涉及到一点图片上传的知识
img标签的src值为以下几种:
1. 只能是图片的”链接地址(外链http://开头、图片文件相对路径)
2. 或者是图片的base64字符串(而且字符串还必须是data:image/png;base64,图片转base64字符串)
一、第一种方法
提示:文件 -> 内存临时地址(这个地址只能在js里内存里不能发给后台)
代码如下:
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>更换头像</span>
</div>
<div>
<!-- 图片,用来展示用户选择的头像 -->
<img v-if="!avatar" alt="" class="the_img" src="../../assets/images/avatar.jpg"/>
<img v-else :src="avatar" class="the_img" alt=""/>
<!-- 按钮区域 -->
<div class="btn-box">
<input ref="iptRef" accept="image/*" style="display: none" type="file" @change="onFileChange"/>
<el-button icon="el-icon-plus" type="primary" @click="chooseImg">选择图片</el-button>
<el-button :disabled="avatar === ''" icon="el-icon-upload" type="success">上传头像</el-button>
</div>
</div>
</el-card>
</template>
<script>
export default {
name: 'UserAvatar',
data () {
return {
avatar: '' // 保存图片链接/base64字符串
}
},
methods: {
// 选择图片->点击事件->让选择框出现
chooseImg () {
this.$refs.iptRef.click()
},
onFileChange (e) {
// 获取用户选择的文件列表(伪数组)
const files = e.target.files
if (files.length === 0) {
this.avatar = ''
} else {
// (默认只能选1个,如果选择多个你需要给input标签加额外原生属性)
// 语法:URL.createobjectURL(文件)
// 返回值:内存临时地址
this.avatar = URL.createObjectURL(files[0])
}
}
}
}
}
</script>
<style lang="less" scoped>
.btn-box {
margin-top: 10px;
}
.preview {
object-fit: cover;
}
.the_img {
width: 350px;
height: 350px;
}
</style>
二、第二种方法
提示:文件 -> base64字符串(此字符串是可以发给后台的);上传的就是base64字符串
代码如下:
<template>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>更换头像</span>
</div>
<div>
<!-- 图片,用来展示用户选择的头像 -->
<img v-if="!avatar" alt="" class="the_img" src="../../assets/images/avatar.jpg"/>
<img v-else :src="avatar" class="the_img" alt=""/>
<!-- 按钮区域 -->
<div class="btn-box">
<input ref="iptRef" accept="image/*" style="display: none" type="file" @change="onFileChange"/>
<el-button icon="el-icon-plus" type="primary" @click="chooseImg">选择图片</el-button>
<el-button :disabled="avatar === ''" icon="el-icon-upload" type="success">上传头像</el-button>
</div>
</div>
</el-card>
</template>
<script>
export default {
name: 'UserAvatar',
data () {
return {
avatar: '' // 保存图片链接/base64字符串
}
},
methods: {
// 选择图片->点击事件->让选择框出现
chooseImg () {
this.$refs.iptRef.click()
},
onFileChange (e) {
// 获取用户选择的文件列表(伪数组)
const files = e.target.files
if (files.length === 0) {
this.avatar = ''
} else {
const fr = new FileReader()
fr.readAsDataURL(files[0]) // 传入文件对象开始读
// onload 等待把文件读成 base64 字符串后会触发 onload 事件函数
fr.onload = (e) => {
// e.target.result的值就是读完的结果
this.avatar = e.target.result // 赋予给变量,让他显示在img的src里
}
}
}
}
}
}
</script>
<style lang="less" scoped>
.btn-box {
margin-top: 10px;
}
.preview {
object-fit: cover;
}
.the_img {
width: 350px;
height: 350px;
}
</style>