效果图：
image.png
点击查看element-ui文档地址，此处使用的是 list-type="picture-card" 照片墙效果。
🍕想看详细代码的直接往下看~~~~
🎈上传样式处理：
通过标签包裹，每次上传时，实现只显示一个模块效果
.img_example{
width: 150px;
height: 150px;
overflow: hidden;
}
image.png
🎈图片查看：
然后是查看示例图，通过使用 el-dialog 和自定义的样式属性，实现查看效果
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
<div class="img_example">
<img src="@/assets/img/user_zhengmian.jpg" @click="toView_IMG" alt />
<div class="cover">
<div>
<i class="el-icon-zoom-in"></i>
<p>查看示例</p>
</div>
</div>
</div>
注意：因为 cover 遮罩层是在图片上层，但是在查看图片时，必须要获取图片的相关参数 e,所以要在 cover 上添加一个css属性(禁用该标签上的所有鼠标事件)
.cover {
pointer-events: none;
}
//图片查看
toView_IMG(e) {
this.dialogImageUrl = e.toElement.src;
this.dialogVisible = true;
}
image.png
🎈图片回显：
大家可以参考element-ui的官方解释，主要是通过 :file-list，回显的时候需要注意格式:
name , url 都是必须要有的，name 尽量带文件类型(.jpg,.png等)，因为此处有对文件格式的校验
PhotoFront: [{ name: "vue图片.png", url: "https://cn.vuejs.org/images/logo.png" }]
image.png
代码如下：
<template>
<div>
<el-dialog :visible.sync="dialogVisible" width="400px">
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
<div class="form_box">
<el-form class="form">
<el-form-item label="身份证照片：">
<div class="img_upload_line">
<div class="img_upload_box" @click.capture="fileType = 'fd_0'">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="selectFiles"
title="个人信息页"
:file-list="form.PhotoFront"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div class="img_example">
<img src="@/assets/img/user_zhengmian.jpg" @click="toView_IMG" alt />
<div class="cover">
<div>
<i class="el-icon-zoom-in"></i>
<p>查看示例</p>
</div>
</div>
</div>
<div class="img_upload_box" @click.capture="fileType = 'fd_1'">
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:auto-upload="false"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="selectFiles"
title="国徽页"
:file-list="form.PhotoReverse"
>
<i class="el-icon-plus"></i>
</el-upload>
</div>
<div class="img_example">
<img src="@/assets/img/user_beimian.jpg" @click="toView_IMG" alt />
<div class="cover">
<div>
<i class="el-icon-zoom-in"></i>
<p>查看示例</p>
</div>
</div>
</div>
</div>
</el-form-item>
</el-form>
<el-button type="primary" @click="submit()">点击上传</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
//图片查看弹框和信息
dialogVisible: false,
dialogImageUrl: "",
//每次点击上传时区分此时上传的文件类型
// fd_0 正面
// fd_1 反面
fileType: "",
form: {
PhotoFront: [
{ name: "vue图片.png", url: "https://cn.vuejs.org/images/logo.png" }
],
PhotoReverse: []
}
};
},
methods: {
//选择文件方法
selectFiles(file, fileList) {
let _this = this;
console.log(file, fileList);
if (_this.fileType == "fd_0") {
_this.form.PhotoFront = fileList;
} else if (_this.fileType == "fd_1") {
_this.form.PhotoReverse = fileList;
}
},
//文件移除方法
handleRemove(file, fileList) {
let _this = this;
console.log(file, fileList);
if (_this.fileType == "fd_0") {
_this.form.PhotoFront = [];
} else if (_this.fileType == "fd_1") {
_this.form.PhotoReverse = [];
}
},
//上传格式校验
handlePictureCardPreview(file) {
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
this.$message.warning("暂不支持查看该格式文件！");
return false;
} else {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
},
//图片查看
toView_IMG(e) {
this.dialogImageUrl = e.toElement.src;
this.dialogVisible = true;
},
//点击上传
submit() {
if (!this.form.PhotoFront[0]) {
this.$message.warning('请上传正面照')
return
}
let formData = new FormData();
if (this.form.PhotoFront[0].raw) {
formData.append("PhotoFront", this.form.PhotoFront[0].raw);
} else {
formData.append("PhotoFront", this.form.PhotoFront[0].url);
}
console.log(formData)
this.$message.success("上传成功");
}
}
};
</script>
<style lang="scss" scoped>
.form_box {
padding-top: 10%;
.form {
width: 800px;
margin: 20px auto;
}
}
//图片上传
.img_upload_line {
display: flex;
.img_upload_box {
width: 150px;
height: 150px;
overflow: hidden;
}
.img_example {
display: flex;
align-items: center;
margin: 0 20px;
cursor: pointer;
// width: 150px;
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
border-radius: 5px;
&:hover .cover {
opacity: 1;
}
&:hover img {
filter: blur(3px);
}
img {
width: 100%;
}
.cover {
pointer-events: none;
text-align: center;
transition: 0.3s;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.534);
i {
color: white;
font-size: 25px;
}
p {
font-size: 13px;
line-height: 20px;
color: white;
}
}
}
}
</style>
网友评论