el-upload照片墙只显示一个并且保留删除预览功能

实现效果

 添加图片

 鼠标放上去显示

 点击放大镜按钮（预览）

 点击删除按钮

 实现代码

				<el-upload
					v-model:file-list="fileList"
					:action="xxxxxxx"
					list-type="picture-card"
					:class="{ disabledImg: fileList.length > 0 ? true : false }"
					:headers="xxxxxxx"
					:data="setUpData()"
					accept=".jpg,.jpeg,.png"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove"
					:limit="1"
					:on-success="handleSuccess"
				>
					<el-icon><Plus /></el-icon>
				</el-upload>

通过检测绑定的fileList长度来判断是否显示新的添加

使用动态class来达成样式变换

.disabledImg {
	:deep(.el-upload--picture-card) {
		display: none;
	}
}