美化场景: 效果图
HTML
<div>
<input type="file" accept="image/gif, image/jpg, image/png" @change="changeUpload" />
<i class="el-icon-plus avatar-uploader-icon"></i>
</div>
css
div {
width: 130px;
height: 180px;
border: 1px dashed #c1c1c1; // 边框
position: relative;
input {
opacity: 0;
width: 130px;
height: 180px;
cursor: pointer;
z-index: 999; // 提高层级
position: absolute; //和 加号 + 一样脱离标准流
top: 0;
left: 0;
}
i {
position: absolute; // 加号 +
top: 0;
left: 0;
}
}