element Upload 上传之自定义上传的长度后隐藏上传按钮以及样式穿透

• 使用属性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>