1、未上传图片时样式
2、上传成功之后样式
2-1、删除效果
2-2放大效果
3、代码部分
3-1、组件封装（子组件）
<template>
<div class="uploadSing">
<el-upload v-if="ossUpload"
v-loading="loading"
class="avatar-uploader"
:action="action"
:show-file-list="false"
:disabled="imageUrl ? true : false"
:data="data"
:headers="headers"
:on-error="onError"
:on-progress="handleProgress"
:on-success="handleAvatarSuccess"
:before-upload="beforeUpload">
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<div v-if="imageUrl" class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreviews">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="delBtnImgFlag" class="el-upload-list__item-preview" @click="handleRemoves">
<i class="el-icon-delete"></i>
</span>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__tip" slot="tip">{{tips}}</div>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
name: 'fileUploadNew',
data() {
return {
fileList: [],
loading: false,
dialogImageUrl: '',
dialogVisible: false,
imageUrl: '',
fileData: '',
showBtnImg: true,
noneBtnImg: false
}
},
props: {
value: {
default: () => []
},
ossUpload: {
type: Boolean,
default: false
},
//提交地址,
action: {
type: String,
default: ''
},
//设置上传的请求头部
headers: {
type: Object,
default: () => {}
},
//上传时附带的额外参数
data: {
type: Object,
default: () => {}
},
//支持最大上传文件数
limit: {
type: Number,
default: 100
},
//是否选择完文件之后自动上传，默认true
auto_upload: {
type: Boolean,
default: true
},
disabled: {
type: Boolean,
default: false
},
//上传之前的处理
beforeUpload: {
type: Function,
default: function(file) {
let types = ['image/jpeg', 'image/jpg', 'image/png']
const isImage = types.includes(file.type)
if (!isImage) {
this.$message.error('上传图片格式只能是jpg/jpeg/png!')
return false
}
if (file.size / 1024 / 1024 > 2) {
this.$message('请控制大小在2M内')
return false
}
}
},
tips: {
type: String,
default: '只能上传jpg/png/jpeg文件，且不超过2M'
},
//控制删除按钮显示隐藏
delBtnImgFlag: {
type: Boolean,
default: true
}
},
watch: {
value: {
handler(val) {
//识别oss
if (this.ossUpload) {
this.imageUrl = val
} else {
//多文件上传
this.fileList = [...val] || []
}
},
deep: true,
immediate: true
}
},
methods: {
//放大
handlePictureCardPreviews() {
this.dialogVisible = true
this.dialogImageUrl = this.imageUrl
},
//删除
handleRemoves() {
console.log(this.data, 'this.data.type')
this.$confirm('确定移除吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
let obj = {
url: '',
type: this.data.type,
side: this.data.side,
statusDel: 'delete' //添加删除标示，因为有ocr识别信息需要保留
}
this.$emit('fileList', obj)
})
.catch(() => {
// this.$message({
// type: 'info',
// message: '已取消删除'
// });
})
},
dealImgChange(file, fileList) {
this.noneBtnImg = fileList.length >= this.limit
},
handleAvatarSuccess(res, file) {
this.loading = false
if (res.code == '0') {
this.$message.success('成功')
this.imageUrl = res.data.url || URL.createObjectURL(file.raw)
this.$emit('fileList', Object.assign(this.data, res.data))
} else {
this.$message({
type: 'warning',
message: res.message || '请上传合格的图片'
})
}
},
handleProgress() {
this.loading = true
},
onError(res) {
this.loading = false
},
uploadFile(file) {
this.fileData.append('file', file.file)
},
}
}
</script>
<style lang="stylus">
.uploadSing{
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon,.el-upload--picture-card {
font-size: 28px;
color: #8c939d;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
}
.avatar {
width: 80px;
height: 80px;
display: block;
}
.el-upload-list--picture-card .el-upload-list__item {
width: 80px;
height: 80px;
}
.el-upload__tip {
text-align: center;
}
.uoloadSty .el-upload--picture-card{
font-size: 28px;
color: #8c939d;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
}
.disUoloadSty .el-upload--picture-card{
display: none; /* 上传按钮隐藏 */
}
.el-upload-list__item-actions {
width: 80px;
height: 80px;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
visibility: hidden;
background: rgba(0, 0, 0, 0.4);
}
.el-upload-list__item-preview {
display: inline-block;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.el-icon-zoom-in:before,
.el-icon-delete:before {
font-size: 30px;
color: #fff;
}
.el-upload:hover .el-upload-list__item-actions {
visibility: visible;
transition: 1s;
z-index: 200;
}
}
</style>
3-2组件用法
<template>
<div>
<file-upload-single :delBtnImgFlag="delBtnImgFlag" class="inline" @fileList="fileList" :action="vehicleAction" :ossUpload="true" :data="{type:'vehicle',side :'face'}" :headers=" {token_type:1}" :value="carBase.drivingLicenseFront" tips="行驶证主页"></file-upload-single>
<file-upload-single :delBtnImgFlag="delBtnImgFlag" class="inline" @fileList="fileList" :action="vehicleAction" :ossUpload="true" :data="{type:'vehicle',side :'back'}" :headers="{token_type:1}" :value="carBase.drivingLicenseBack" tips="行驶证副页"></file-upload-single>
</div>
</template>
<script>
export default {
data() {
return {
delBtnImgFlag: true,//删除按钮显示隐藏
vehicleAction: '', //上传行驶证url
carBase: {
drivingLicenseFront: '',//行驶证正面图片地址
drivingLicenseBack: '',//行驶证反面图片地址
}
},
created() {
this.vehicleAction = ''//上传图片的接口ur
},
methods: {
//公共的上传各种并赋值
fileList(val) {
switch (val.type) {
case 'card':
if (val.side == 'face') {
} else {
}
break
case 'vehicle':
if (val.side == 'face') {
this.$set(this.carBase, 'drivingLicenseFront', val.url)
this.$forceUpdate()
} else {
this.$set(this.carBase, 'drivingLicenseBack', val.url)
}
break
case 'patente':
if (val.side == 'face') {
} else {
}
break
case 'image':
if (val.side == 'face') {
} else {
}
break
default:
break
}
},
},
}
</script>