Upload 上传

用于图片上传，支持多种上传模式和自定义上传接口。

基础用法

通过 custom-upload 传入自定义上传函数。

<template>
  <dr-upload
    v-model="urls"
    :custom-upload="uploadFn"
    :max-count="3"
  />
</template>

<script setup>
import { ref } from 'vue'

const urls = ref('')

// 自定义上传函数，返回上传后的 URL
const uploadFn = async (file) => {
  const formData = new FormData()
  formData.append('file', file.path)
  const res = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  const data = await res.json()
  return data.url
}
</script>

使用上传接口

通过 upload-url 和 headers 配置上传接口。

<template>
  <dr-upload
    v-model="urls"
    upload-url="https://api.example.com/upload"
    :headers="{ Authorization: 'Bearer token' }"
    :form-data="{ dir: 'images' }"
    :parse-response="parseResponse"
  />
</template>

<script setup>
// 自定义响应解析函数
const parseResponse = (data) => {
  if (data.code === 200) {
    return data.url
  }
  return null
}
</script>

单图上传

设置 mode="single" 只上传一张图片。

<dr-upload
  v-model="url"
  mode="single"
  :custom-upload="uploadFn"
/>

证件照上传

设置 mode="replace" 用于证件照等固定位置上传。

<template>
  <dr-upload
    v-model="cardUrls"
    mode="replace"
    :custom-upload="uploadFn"
    :replace-placeholders="placeholders"
  />
</template>

<script setup>
const placeholders = [
  { text: '身份证正面' },
  { text: '身份证反面' }
]
</script>

显示上传进度

设置 show-progress 显示上传进度。

<dr-upload
  v-model="urls"
  :custom-upload="uploadFn"
  show-progress
/>

限制文件大小

通过 max-size 限制文件大小（单位：字节）。

<dr-upload
  v-model="urls"
  :custom-upload="uploadFn"
  :max-size="5 * 1024 * 1024"
  @oversize="onOversize"
/>

<script setup>
const onOversize = (files) => {
  uni.showToast({ title: '文件不能超过5MB', icon: 'none' })
}
</script>

禁用状态

<dr-upload
  v-model="urls"
  disabled
/>

自定义上传按钮

通过 trigger 插槽自定义上传按钮。

<dr-upload v-model="urls" :custom-upload="uploadFn">
  <template #trigger>
    <view class="custom-btn">
      <text>📷 点击上传</text>
    </view>
  </template>
</dr-upload>

API

Props

参数	说明	类型	默认值
v-model	已上传文件 URL，多个用逗号分隔	string	''
mode	上传模式：append single replace	string	append
max-count	最大上传数量	number	9
multiple	单次最多选择数量	number	9
show-upload-btn	是否显示上传按钮	boolean	true
deletable	是否可删除	boolean	true
disabled	是否禁用	boolean	false
upload-text	上传按钮文字	string	上传图片
image-mode	图片显示模式	string	aspectFill
show-progress	是否显示上传进度	boolean	false
previewable	是否可预览图片	boolean	true
source-type	图片来源	array	['album', 'camera']
size-type	图片尺寸类型	array	['original', 'compressed']
max-size	最大文件大小（字节），0 不限制	number	0
replace-placeholders	replace 模式占位配置	array	[{text:'正面'},{text:'反面'}]

上传配置 Props

参数	说明	类型	默认值
upload-url	上传接口地址	string	''
headers	请求头	object	{}
name	上传文件字段名	string	file
form-data	上传附带的额外参数	object	{}
custom-upload	自定义上传函数	function	null
parse-response	自定义响应解析函数	function	null

custom-upload 函数签名

type CustomUpload = (file: {
  path: string    // 文件临时路径
  size: number    // 文件大小
}) => Promise<string>  // 返回上传后的 URL

parse-response 函数签名

type ParseResponse = (response: any) => string | null
// 返回 URL 字符串，解析失败返回 null

Events

事件名	说明	回调参数
change	文件列表变化时触发	fileList: object[]
success	上传成功时触发	{ url: string, file: object }
fail	上传失败时触发	{ error: Error, file: object }
delete	删除文件时触发	{ index: number, file: object }
preview	预览图片时触发	{ index: number, urls: string[] }
oversize	文件超出大小限制时触发	files: object[]

Slots

名称	说明
trigger	自定义上传按钮

Methods

方法名	说明	参数
getFileList	获取文件列表	-
getUrls	获取 URL 数组	-
clear	清空文件	-
chooseFile	手动触发选择文件	-