Upload 上传

该组件目前处于实验性状态，需要进行更加严密的测试，API 也可能发生比较大的变动

我要一步一步往上爬

等待阳光静静看着它的脸

import { DuUpload } from 'dangoui'

示例

例子

因为涉及网络请求，Upload 需要进行一些配置才能比较舒服地在整个应用中使用

<template>
  <PreviewBlock title="基本">
    <DuUpload
      v-model:value="fileList"
      badge="封面"
      action="https://run.mocky.io/v3/de7ed31f-93f1-4143-b25e-c9249cd77a5c"
      :before-response="beforeResponse"
      :media-type="['image']"
      :max-count="6"
    />
  </PreviewBlock>
  <PreviewBlock title="初始">
    <DuUpload
      v-model:value="fileList3"
      action="https://run.mocky.io/v3/de7ed31f-93f1-4143-b25e-c9249cd77a5c"
      :before-response="beforeResponse"
    />
  </PreviewBlock>
  <PreviewBlock title="图片视频">
    <DuUpload
      v-model:value="fileList4"
      action="https://run.mocky.io/v3/de7ed31f-93f1-4143-b25e-c9249cd77a5c"
      :before-response="beforeResponse"
      :media-type="['image', 'video']"
    />
  </PreviewBlock>
  <PreviewBlock title="改变大小">
    <DuUpload
      v-model:value="fileList2"
      size="large"
      action="https://run.mocky.io/v3/de7ed31f-93f1-4143-b25e-c9249cd77a5c"
      :before-response="beforeResponse"
    />
  </PreviewBlock>
  <PreviewBlock title="禁用">
    <DuUpload
      v-model:value="fileList2"
      badge="封面"
      action="https://run.mocky.io/v3/de7ed31f-93f1-4143-b25e-c9249cd77a5c"
      :before-response="beforeResponse"
      disabled
    />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuUpload } from 'dangoui'

function beforeResponse(f: any) {
  if (f.statusCode === 200) {
    const json = JSON.parse(f.responseText)
    f.url = json.url
    f.thumbUrl = json.url
    f.status = 'done'
  } else {
    f.status = 'error'
  }

  f.chain = false

  return f
}

const fileList = ref([
  {
    uid: 1,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 2,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 3,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 4,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 5,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  }
])

const fileList2 = ref([
  {
    uid: 1,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
  {
    uid: 2,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
])

const fileList3 = ref([])

const fileList4 = ref([])
</script>

配合全局配置

一般来说，一个应用内的上传逻辑是统一的。为了更加方便的使用组件，可以在全局配置中配置上传逻辑，这样在大多数情况下使用 Upload 都不需要繁琐地传递冗长的参数：

import { globalConfig } from 'dangoui'

app.use(globalConfig, {
  upload: {
    beforeUpload(file) {
      file.action =
        'https://run.mocky.io/v3/de7ed31f-93f1-4143-b25e-c9249cd77a5c'
      file.name = 'file'
      return file
    },
    beforeResponse(file) {
      if (file.statusCode === 200) {
        const json = JSON.parse(file.responseText ?? '{}')
        file.url = json.url
        file.thumbUrl = json.url
        file.status = 'done'
      } else {
        file.status = 'error'
      }
      return file
    },
  },
})

全局配置

<template>
  <PreviewBlock title="基本">
    <DuUpload v-model:value="fileList" badge="封面" />
  </PreviewBlock>
</template>

<script setup lang="ts">
import { DuUpload } from 'dangoui'

const fileList = ref([
  {
    uid: 1,
    url: '',
    thumbUrl: 'https://cdn.qiandaoapp.com/interior/images/1ab88333caa868a7f2bdfc0bbd3df1f6.jpg'
  },
])
</script>

API

属性

属性名	类型	默认值	说明
value	`UploadFile[]`	`[]`	上传文件列表
ext-style	`string \| { [x: string]: string \| number; }`	`""`
size	`"normal" \| "large"`	`"normal"`	大小
name	`string`	`"file"`	默认表单中文件字段名称，在 `beforeUpload` 中可以进行改写
headers	`Record<string, string>`	`{}`	默认请求头，在 `beforeUpload` 中可以进行改写
data	`Record<string, string>`	`{}`	默认请求数据，在 `beforeUpload` 中可以进行改写
scene	`string`	`""`	场景值，在我们实践中，一个项目中可能会有多个上传场景，比如头像上传、商品图片上传等可以在 `UploadFile` 对象中拿到这个值，我们根据这种场景可以进行不同的上传策略如果对你来说没有这个需求，可以忽略
badge	`string`	`""`	第一张图的标签
upload-text	`string \| ((params: { value: UploadFile[]; maxCount?: number; }) => string) \| undefined`	`"\u4E0A\u4F20"`	上传按钮中的文案
before-response	`((f: UploadFile) => UploadFile \| Promise<UploadFile>)`	`uploadFile`	在上传完成响应返回之后，可以对 `UploadFile` 对象进行改写
media-type	`("image" \| "video")[]`	`["image"]`	mediaType 小程序
disabled	`boolean`	-	是否禁用
action	`string`	-	默认上传地址，在 `beforeUpload` 中可以进行改写
camera	`"back" \| "front"`	-	camera
max-count	`number`	-	最大上传数量
before-upload	`((f: UploadFile) => UploadFile \| Promise<UploadFile>)`	-	在执行上传之前，可以对 `UploadFile` 对象进行改写
source-type	`("album" \| "camera")[]`	-	sourceType 小程序
max-duration	`number`	-	maxDuration
size-type	`("original" \| "compressed")[]`	-	sizeType
custom-add	`((params: { scene: string; }) => Promise<UploadFile[]>)`	-

事件

名称	类型
update:value	`(event: "update:value", value: UploadFile[]): void`