Wot Design Uni 组件库中 wd-upload 异步上传功能解析

Wot Design Uni 组件库中 wd-upload 异步上传功能解析

【免费下载链接】wot-design-uni Moonofweisheng/wot-design-uni: 是一个基于 UniApp 的物料库，包含了一系列常用的布局、组件和图标等设计资源。适合对 UniApp、前端设计和想要使用现成物料库的开发者。 项目地址: https://gitcode.com/gh_mirrors/wo/wot-design-uni

背景介绍

Wot Design Uni 是一款基于 UniApp 的 UI 组件库，其中的 wd-upload 上传组件是开发者常用的文件上传解决方案。在实际开发中，开发者经常需要在文件上传前进行一些预处理操作，如图片格式转换、文件大小校验、后端接口验证等，这些操作往往需要异步处理。

问题发现

在 Wot Design Uni 的早期版本中，wd-upload 组件的 upload-method 属性不支持 Promise 类型的异步函数。当开发者传入 async 函数时，组件会静默失败，转而使用默认的上传方法，这给开发者带来了困惑和不便。

技术实现分析

异步上传的必要性

现代 Web 应用中，文件上传往往需要配合多种预处理操作：

1. 文件格式转换（如 HEIC 转 JPG）
2. 文件压缩处理
3. 上传前的权限校验
4. 文件内容安全检查
5. 分片上传前的准备工作

这些操作都需要等待异步操作完成才能继续上传流程，因此支持 Promise 类型的上传函数是必要的。

实现原理

组件内部需要对 upload-method 进行类型判断和处理：

1. 判断传入的函数是否是 Promise 类型
2. 如果是 Promise 函数，等待其 resolve
3. 如果是普通函数，直接执行
4. 统一处理返回结果和错误情况

最佳实践

基本用法

<wd-upload
  v-model:file-list="fileList"
  :upload-method="customUpload"
/>

async function customUpload(file) {
  // 1. 检查文件类型
  if (!isValidType(file)) {
    throw new Error('不支持的文件类型')
  }
  
  // 2. 压缩图片
  const compressedFile = await compressImage(file)
  
  // 3. 调用后端上传接口
  const result = await api.upload(compressedFile)
  
  return result
}

错误处理

开发者可以在自定义上传函数中捕获和处理各种异常：

async function customUpload(file) {
  try {
    // 预处理逻辑...
    return await uploadFile(file)
  } catch (error) {
    console.error('上传失败:', error)
    // 可以返回特定格式的错误信息
    return {
      status: 'error',
      message: error.message
    }
  }
}

版本演进

该功能在 2025 年 2 月的更新中被加入，通过两个关键提交实现：

1. 初始实现（17e7cc7）
2. 错误处理和稳定性改进（25649db）

总结

Wot Design Uni 的 wd-upload 组件通过支持 Promise 类型的上传函数，大大增强了文件上传的灵活性和可控性。开发者现在可以轻松实现各种复杂的上传前处理逻辑，同时保持代码的清晰和可维护性。这一改进体现了组件库对开发者实际需求的关注和响应能力。

【免费下载链接】wot-design-uni Moonofweisheng/wot-design-uni: 是一个基于 UniApp 的物料库，包含了一系列常用的布局、组件和图标等设计资源。适合对 UniApp、前端设计和想要使用现成物料库的开发者。 项目地址: https://gitcode.com/gh_mirrors/wo/wot-design-uni