el-upload两种不同的上传方式实现分析

<el-upload ref="uploadRef" :disabled="loading"
    :auto-upload="false"
    :on-change="handleFileChange"
    :file-list="fileList">

    <template #trigger>
        <el-button type="primary">选取文件</el-button>
    </template>

    <template #tip>
        <div class="text-xs text-red mt-2">文件格式为xls,xlsx文件,单次最多上传1000条</div>
    </template>
            
    <el-button :loading="loading" type="primary" @click="onUpload">确 定</el-button>
</el-upload>

const handleFileChange = (file: any, files: any[]) => {
    // 校验文件格式
    const ext = file.name.split('.').pop()?.toLowerCase()
    if (!['xls', 'xlsx'].includes(ext)) {
        message.error('请上传 xls/xlsx 格式的文件')
        // 移除不合法的文件
        uploadRef.value?.clearFiles()
        fileList.value = []
        return
    }
    // 合法文件，更新列表
    fileList.value = [file]
}

const onUpload = async () => {
    // 检查是否有文件
    if (fileList.value.length === 0) {
        message.warning('请先选择文件')
        return
    }

    try {
        loading.value = true
        const params = new FormData()
        params.append('file', fileList.value[0].raw)
        const res = await UploadAPPListConfig(params)        
        // 上传成功
        if(res.code === 0 && res.data) {
            message.success(res.data)
            dialogVisible.value = false
            emit('success')
        }
    } finally {
        loading.value = false
    }
}

<el-upload 
    :auto-upload="true"
    :show-file-list="false" 
    :disabled="updLoading"
    :before-upload="onBeforeUpload" 
    :http-request="onUpload" >
    <el-button type="primary" :loading="updLoading">选取文件</el-button>
</el-upload>

const onBeforeUpload = (file) => {
    // Excel 判断（推荐用扩展名）
    const ext = file.name.split('.').pop()?.toLowerCase()
    if (!['xls', 'xlsx'].includes(ext)) {
        message.error('请上传 xls/xlsx 格式的文件')
        return false
    }
    return true //允许上传
}

const onUpload = async (updFile) => {
    try {
        updLoading.value = true
        const file = updFile.file
        const params = new FormData()
        params.append('file', file)
        const res = await UploadTeleExcel(params)
        message.success('上传成功')
        // 全部成功才能上传
        formData.value.successPhones = res.data.failPhones.length === 0 && res.data.successPhones.length > 0 ? res.data.successPhones: []
    } finally {
        updLoading.value = false
    }
}