element自定义上传方法与解决无法二次上传问题

前言

本文基于element plus，如果使用的是低版本的element可以参照修改，异曲同工。
在使用element提供的上传组件时，通常有一个痛点就是，上传组件提供的上传接口属性与我们封装的api方法难以搭配，我们封装的api方法基于axios封装，里边可能融合鉴权、错误处理等方法，那么此时就需要使用上传组件的自定义上传的api：http-request
在使用时要特别注意处理一次上传完毕后，无法二次上传的问题，闲话少说上代码

自定义上传

<template>
    <el-upload
        :limit="1" 
        :show-file-list="false"
        :http-request="upFile"
        ref="uploadRef"
    >
        <el-button class="w-add">
            <el-icon><Upload /></el-icon>
            上传
        </el-button>
    </el-upload>
</template>
<script setup>
import { ref } from 'vue'
import fileUpload from '@/api/upload'

const uploadRef = ref()
// 文件上传
const upFile = data => {
    const formData = new FormData()
    formData.append('file', data.file)
    return fileUpload(formData).then(() => {
        ElMessage({ message: '导入成功', type: 'success' })
        uploadRef.value.handleRemove(data.file)
        data = null
    })
}
</script>

解决无法二次上传问题

调用组件内部方法的handleRemove方法，而不是clearFiles方法，这里特别注意一下，clearFiles方法只是清除显示的文件列表，handleRemove方法是逻辑层阻止无法二次上传的根源

uploadRef.value.handleRemove(file: UploadFile | UploadRawFile)