vue3 element-plus upload 实现各种需求

1 写在前面的话（element-plus 2.8.0）

• 对于这个上传组件， 推荐使用 http-request 自定义上传，便于统一控制请求头、token、错误处理等，可操作空间大。
• auto-upload="false"，不可以用变量控制 true/false，一旦初始化不可改变。
• submit() 方法只能是在 auto-upload="false" 的时候调用

2 实现上传失败，手动点击重试功能的几种思路

大概是这样的需求

2.1 手动上传的情况下，即设置:auto-upload="false"

当上传失败时在on-error 方法里保存上传失败的文件，然后将失败的文件状态改为ready,重新调用 submit() 方法实现。

2.2 自动上传的情况下，不使用Element plus 默认的文件显示列表，显示自己自定义的样式

需设置：

:auto-upload="true"
:show-file-list="false"

当上传失败时在on-error 方法里保存上传失败的文件，重新调用 http-request自定义方法，如果是多文件重试，在封装一个遍历调用。

3 取消上传的实现思路

3.1 AbortController + axios(signal)

// 取消上传
const controller = ref(null)
const handleUpload = async ({ file }) => {
    const formData = new FormData()
    formData.append('file', file)
    try {
        controller.value = new AbortController() // ✅ 创建一个新的 AbortController 实例
        const res = await $API('uploadFile', null, formData, null, {
            signal: controller.value.signal, // 传递 signal
            onUploadProgress: progressEvent => {
                const percentCompleted = Math.round(
                   (progressEvent.loaded * 100) / progressEvent.total
                )
                if (percent === 100) {
                    percent = 99
                }
                //调用onProgress方法来显示进度条，需要传递个对象 percent为进度值
                handleUploadProgress({
                    percent: percent
                })
            },
            timeout: 7200 * 1000
        })
        if (res.code === 20000) {           
            handleUploadSuccess()
        } else if (res.code === 'ERR_CANCELED') {
            ElMessage.success('取消上传成功')
        } else {
            handleUploadError(res, file)
        }
    } catch (error) {
        if (axios.isCancel(error)) {
            console.log('上传被取消:', error.message)
        } else {
            handleUploadError(error, file)
        }
    }
}

3.2 upload 组件自带方法，不自定义http-request的情况下有效

uploadRef.value.abort()
uploadRef.value.clearFiles()

4 自动上传情况下外部调用重新选取文件的方法

给内部 trigger button 添加ref, 通过ref直接调用这个button

    triggerButtonRef.value?.click()

如果通过uploadRef 去获取里面的input 会报错：只能在用户的直接操作下被触发：

File chooser dialog can only be shown with a user activation.