使用属性limit 自定义允许上传文件的最大数量
v-model:file-list="fileList" 绑定默认上传文件
动态绑定class类 :class="{ hide: hideUploadEdit }"
<el-upload
v-model:file-list="fileList"
action=""
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:http-request="handleUpdataPriture"
:on-remove="handleRemove"
:limit="limit" :class="{ hide: hideUploadEdit }">
<el-icon>
<Plus />
</el-icon>
</el-upload>
定义变量
// 图片上传列表
// { name: '', url: '' }
const fileList = ref([]) // 文件列表
const limit = ref(1) // 允许上传文件的最大数量
const dialogImageUrl = ref('') // 图片预览地址
const dialogVisible = ref(false) // 图片预览弹框显示和隐藏
const hideUploadEdit = ref(false) // 动态控制图片上传按钮的class类
隐藏上传按钮
//上传图片
const handleUpdataPriture = async (option) => {
const file = new FormData();
file.append("file", option.file)
const res = await updataPritureApi(file)
emit('imageUrl', res[0])
// 当上传文件列表大于 允许上传文件的最大数量 动态控制图片上传按钮的class类为true
hideUploadEdit.value = fileList.value.length >= limit.value
}
class 类样式穿透
/* less :使用 /deep/ */
/* scss:使用 ::v-deep */
<style scoped>
/* less :使用 /deep/ */
/* scss:使用 ::v-deep */
.hide /deep/ .el-upload--picture-card {
display: none;
}
</style>
下面是全部代码
<template>
<el-upload
v-model:file-list="fileList"
action=""
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:http-request="handleUpdataPriture"
:on-remove="handleRemove"
:limit="limit" :class="{ hide: hideUploadEdit }">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" style="height: 300px;" />
</el-dialog>
</template>
<script setup name="uploadImage">
import { ref } from 'vue'
import { updataPritureApi } from '@/api/category'
import { Plus } from '@element-plus/icons-vue'
const emit = defineEmits(['imageUrl', 'delImage'])
// 图片上传列表
// { name: '', url: '' }
const fileList = ref([]) // 文件列表
const limit = ref(1) // 允许上传文件的最大数量
const dialogImageUrl = ref('') // 图片预览地址
const dialogVisible = ref(false) // 图片预览弹框显示和隐藏
const hideUploadEdit = ref(false) // 动态控制图片上传按钮的class类
// 删除图片
const handleRemove = (uploadFile, uploadFiles) => {
emit('delImage')
hideUploadEdit.value = fileList.value.length >= limit.value
}
//上传图片
const handleUpdataPriture = async (option) => {
const file = new FormData();
file.append("file", option.file)
const res = await updataPritureApi(file)
emit('imageUrl', res[0])
// 当上传文件列表大于 允许上传文件的最大数量 动态控制图片上传按钮的class类为true
hideUploadEdit.value = fileList.value.length >= limit.value
}
// 预览图片
const handlePictureCardPreview = (uploadFile) => {
dialogImageUrl.value = uploadFile.url
dialogVisible.value = true
}
// 对外暴露
defineExpose({ fileList, hideUploadEdit, limit })
</script>
<style scoped>
/* less :使用 /deep/ */
/* scss:使用 ::v-deep */
.hide /deep/ .el-upload--picture-card {
display: none;
}
</style>