1、转化为base64的字符串
<template>
<el-card class="box-card">
<div>
<img :src="avatar" alt="" class="preview" v-if="avatar" />
<!-- 图片,用来展示用户选择的头像 -->
<img
src="../../../assets/images/avatar.jpg"
alt=""
class="preview"
v-else
/>
<!-- 按钮区域 -->
<div class="btn-box">
<!-- 增加文件选择框 -->
<input
type="file"
accept="image/*"
style="display: none"
ref="iptFile"
@change="onChangeFile"
/>
<el-button
type="primary"
icon="el-icon-plus"
@click="$refs.iptFile.click()"
>选择图片</el-button
>
</div>
</div>
</el-card>
</template>
<script>
export default {
name: "UserAvatar",
data() {
return {
avatar: "",
};
},
methods: {
onChangeFile(e) {
const fileList = e.target.files;
if (fileList.length > 0) {
console.log(fileList[0]);
const reader = new FileReader();
reader.readAsDataURL(fileList[0]);
reader.addEventListener("load", () => {
console.log(reader.result);
this.avatar = reader.result;
});
} else {
this.avatar = "";
}
},
},
};
</script>
<style lang="less" scoped>
.btn-box {
margin-top: 10px;
}
.preview {
object-fit: cover;
width: 350px;
height: 350px;
}
</style>
2、转换成 url
<template>
<div>
<!-- 用来显示封面的图片 -->
<img :src="previewImg" alt="" class="cover-img" ref="imgRef" />
<br />
<!-- 文件选择框,默认被隐藏 -->
<input @change="coverImgChangeHandler" type="file" accept="image/*" ref="iptFileRef" hidden/>
<!-- 选择封面的按钮 -->
<button type="text" @click="choosecoverImgHandler">+ 选择封面</button>
</div>
</template>
<script>
import coverImg from '@/assets/images/cover.jpg'
export default {
data () {
return {
previewImg: coverImg
}
},
methods: {
choosecoverImgHandler () {
this.$refs.iptFileRef.click()
},
coverImgChangeHandler (e) {
console.log(e.target.files)
const files = e.target.files
if (files.length === 0) {
this.previewImg = coverImg
} else {
this.previewImg = URL.createObjectURL(files[0])
}
}
}
}
</script>
<style lang="less" scoped>
.cover-img {
width: 400px;
height: 280px;
object-fit: cover;
}
</style>