开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情
vue上传图片时预览图片
前言：
- 图片上传时所伴随的场景之一对选择的图片在页面上先呈现出来，在此处记录一下该场景
- 功能介绍：图片预览、限制大小（
5M）、重新选择图片 - 辅助：
element-ui组件库 - 版本使用vue2
- 至于都使用组件库，直接用组件库他不香吗，这里表示额对组件库研究尚浅，用起来还做不到游刃有余，以及其中的二次封装额先把效果实现，让代码跑起来先【能跑就行🚥】
html部分（即template）
<template>
<div class="menu-img">
<input type="file" accept="image/*" @change="showImg()" ref="img">
<div class="img-wrap" v-if="imgUpload.imgShow">
<img :src="imgUpload.imgSrc" alt="">
<i class="el-icon-refresh menu-refresh" @click="changeImg()"></i>
</div>
<div class="mi-tips">
点击添加图片
<p>（建议尺寸1280*1024，支持上传图片格式有jpg、jpeg、png、gif、webp）</p>
</div>
</div>
</template>
script部分
<script>
export default {
data () {
return {
imgUpload: {
imgShow: false,
imgSrc: null
}
}
},
methods: {
showImg () {
var that = this
if ((this.$refs.img.files[0].size / 1024 / 1024) > 5) {
//组件库弹窗提示
this.$message({
message: '文件大小不得超过5M,请重新上传',
type: 'warning'
})
//清空input选择的文件，方便重新选择
this.$refs.img.value = ''
} else {
var f = new FileReader()
f.readAsDataURL(this.$refs.img.files[0])
f.onload = function () {
that.imgUpload.imgSrc = f.result
}
//显示img
that.imgUpload.imgShow = true
}
},
changeImg () {
//触犯input框的点击
this.$refs.img.dispatchEvent(new MouseEvent('click'))
}
}
}
</script>
样式（less）
style lang="less">
.menu-img{
position:relative;width:690px;height:390px;
margin:100px;
background: #eee url("../../../assets/add.png") no-repeat center 140px;
input{
width: 100%;
height: 100%;
opacity: 0;
}
textarea{color: #000;}
.mi-tips{
position: absolute;
top: 225px;
width: 100%;
text-align: center;
text-align: center;color: #999;font-size: 15px;line-height: 20px;
p{
font-size: 13px;
}
}
.img-wrap{
width: 100%;height:100%;
position: absolute;
top: 0;left: 0;
z-index: 4;
&:hover{
.menu-refresh{
display: block;
}
}
}
img{
width: 100%;
height: 100%;
z-index: 4;
}
.menu-refresh{
position: absolute;top:10px;right:10px;
font-size: 25px;
font-weight: bold;
display: none;
z-index: 4;
}
}
效果展示
- 图片选择前：
- 图片选择后：
思路分析：
- 将input、
img占满包裹的容器、通过index层级关系控制处于最上层的是input框还是img,点击上传图片读取我文件并解析重新渲染至页面；切换图片借助函数控制触发input框的点击效果。
小结：
文件的上传对个人来说一直是日常交互所经常遇到的问题，所以再次先做个简单的记录，亟待日后的补充，完善，单独封装，形成一个完备的、方便使用的、复用性强的一个文件上传组件，包括目前所知道的图片预览、限制图片（大小、类型、数量）、多图上传、支持修改、剪裁等功能。 知识说着简单，实际上要将其做好却不知要延伸出多少知识点，前路漫漫，任重而道远。
