上传

这个组件主要适用于 TDesign Upload 组件，并提供了适配的 Hook，返回的参数可以直接作为该组件的参数。

TIP

上传的 API 路径在项目配置中指定，会通过 POST 请求提交数据。

import { useUpload } from '@duxweb/dux-refine'
import { Upload } from 'tdesign-react/esm'

const uploadParams = useUpload()
<Upload {...uploadParams} theme='image' accept='image/*' />

import { useUpload } from '@duxweb/dux-refine'
import { Upload } from 'tdesign-react/esm'

const uploadParams = useUpload()
<Upload {...uploadParams} theme='image' accept='image/*' />

数据转换

你可以使用 formatUploadSingle 方法将字符串 URL 转换为上传组件的 files 参数。

import { formatUploadSingle } from '@duxweb/dux-refine'

const files = formatUploadSingle("http://....jpg")

import { formatUploadSingle } from '@duxweb/dux-refine'

const files = formatUploadSingle("http://....jpg")

你也可以使用 getUploadSingle 方法将 files 参数转换为字符串 URL。

import { getUploadSingle } from '@duxweb/dux-refine'

const url = getUploadSingle(files)

import { getUploadSingle } from '@duxweb/dux-refine'

const url = getUploadSingle(files)

返回数据

上传结果的 API 需要在 data 字段中返回文件信息，示例如下：

json

{
  "code": 200,
  "message": "ok",
  "data": {
    "list": [
      {
        "url": "http://...",
        "name": "Image",
        "ext": "jpg",
        "size": 1024,
        "mime": "image/jpeg"
      }
    ]
  }
}

{
  "code": 200,
  "message": "ok",
  "data": {
    "list": [
      {
        "url": "http://...",
        "name": "Image",
        "ext": "jpg",
        "size": 1024,
        "mime": "image/jpeg"
      }
    ]
  }
}

上传 ​

数据转换 ​

返回数据 ​

上传

数据转换

返回数据