使用 element UI 中的el-upload 如何限制上传一张图片后隐藏右侧的上传区域
主要代码块:
监听事件
watch: {
onChangeImgUrl: {
handler(newName) {
var aa = document.querySelector('.el-upload--picture-card')
if (newName) {
aa.style.display = 'none'
} else {
setTimeout(() => {
aa.style.display = 'inline-block'
}, 1100)
}
}
}
原理:
因为只上传一张图片,监听图片的url 即可。听过监听图片的url存在与否,通过获取dom元素设置不同的样式。
以下完整代码实现如下效果:
父组件setBank.vue
<template>
<div class="setBank">
<el-button type="primary" @click="addInfo">入驻</el-button>
<el-dialog :visible.sync="checkDialogVisible" title="入驻">
<Upload />
</el-dialog>
</div>
</template>
<script>
import Upload from './upload.vue'
export default {
components: {
Upload
},
data() {
return {
checkDialogVisible: false
}
},
methods: {
// 入驻
addInfo() {
this.checkDialogVisible = true
}
}
}
</script>
子组件 upload.vue
<template>
<div class="con_form">
<el-form ref="addForm" :model="addForm" class="demo-comCreditForm" label-width="200px">
<el-form-item label="企业名称:" prop="name"> <el-input v-model="addForm.name" placeholder="转贷机构名称" /> </el-form-item>
<el-form-item label="统一社会信用代码:" prop="code"> <el-input v-model="addForm.code" placeholder="请输入统一社会信用代码" /> </el-form-item>
<div class="upload_icon">
<el-form-item label="上传:" prop="addForm">
<el-upload
:auto-upload="false"
:limit="limitCount"
:on-remove="handleRemove"
:on-change="onChange"
:on-success="handleSuccess"
:file-list="fileList"
:data="uploadData"
:before-upload="beforeAvatarUpload"
action="#"
class="avatar-uploader"
list-type="picture-card"
accept="image/jpg,image/jpeg,image/png">
<img v-if="url" :src="url" class="el-upload-list__item-thumbnail"></img>
<i v-else slot="default" class="el-icon-plus" />
</el-upload>
<div class="el-upload__tip">jpg.jpeg、png格式,大小5M以内</div>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
limitCount: 1,
url: '',
onChangeImgUrl: '',
uploadData: {
name: 'testFile'
},
fileList: [],
// 申请入驻银行 表单
addForm: {
name: '',
code: '' // 社会信用代码
}
}
},
watch: {
onChangeImgUrl: {
handler(newName) {
var aa = document.querySelector('.el-upload--picture-card')
if (newName) {
aa.style.display = 'none'
} else {
setTimeout(() => {
aa.style.display = 'inline-block'
}, 1100)
}
}
}
},
methods: {
onChange(file, fileList) {
this.onChangeImgUrl = file.url
},
handleRemove(file, fileList) {
this.onChangeImgUrl = ''
},
handleSuccess(file, fileList) {
this.$set(this.myForm, 'netTgThumbnail', fileList.response.bean.result.fileUrlPath)
},
// 限制图片大小
beforeAvatarUpload(file) {
const isLt5M = file.size / 1024 / 1024 < 5
if (!isLt5M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isLt5M
}
}
}
</script>
<style scoped lang="scss">
/deep/.upload_icon .el-form-item__content {
position: relative;
height: 190px;
}
.avatar-uploader {
width: 145px;
height: 145px;
position: absolute;
left: 0;
top: 0;
}
.con_form .upload_icon .el-form-item__content .el-upload__tip {
position: absolute;
left: 0;
bottom: 0;
color: red;
}
</style>