引入组件

局部引入

// parent.vue
const FUpload = defineAsyncComponent(() => import('@/components/formaui/f-upload/f-upload.vue'))

基础用法

v-model属性：图片地址列表

<f-upload v-model="images" @complete="onComplete" @remove="onRemove" />

import { ref } from 'vue'

const images = ref<string[]>([])

const onComplete = (detail: { status: number; imgArr: string[] }) => {
  console.log(detail.status, detail.imgArr)
}

const onRemove = (detail: { index: number }) => {
  console.log(detail.index)
}

limit属性：最大上传数量（默认9）

<f-upload v-model="images" :limit="3" />

serverUrl属性：上传接口地址

设置后选择图片将自动上传；接口返回格式需为 { status: 200, data: '图片地址' }（status % 100 === 0 视为成功）。

<f-upload v-model="images" server-url="https://api.example.com/upload" />

isMultiple属性：是否多选（默认false）

<f-upload v-model="images" is-multiple :limit="9" />

isDelConfirm属性：删除前弹框确认（默认false）

<f-upload is-del-confirm />

isForbidDel / isForbidAdd属性：禁用删除或添加

<f-upload is-forbid-del />
<f-upload is-forbid-add />

borderRadius / borderColor / borderStyle属性：添加按钮样式

<f-upload border-radius="16rpx" border-color="var(--f-border-color)" border-style="dashed" />

isCenter属性：垂直居中排列（默认false）

<f-upload is-center />

width / height属性：图片展示尺寸（默认218rpx）

<f-upload width="160rpx" height="160rpx" />

插槽

名称	说明
default	自定义添加按钮

属性

名称	类型	说明	默认值
v-model	string[]	图片地址列表	[]
width	string	展示图片宽度	218rpx
height	string	展示图片高度	218rpx
borderRadius	string	圆角半径	0
bgColor	string	添加按钮背景色	#F7F7F7
isCenter	boolean	是否垂直居中排列	false
borderColor	string	添加按钮边框颜色，transparent 无边框	transparent
boxShadow	string	添加按钮阴影	none
borderStyle	string	边框样式，可传入[solid、dashed、dotted]	dashed
delColor	string	删除按钮背景色	rgba(0,0,0,0.6)
isDelConfirm	boolean	删除前是否弹框确认	false
isForbidDel	boolean	是否禁用删除	false
addColor	string	添加图标颜色	#888888
addSize	string	添加图标大小	68rpx
isForbidAdd	boolean	是否禁用添加	false
serverUrl	string	上传接口地址，为空时仅返回本地路径	-
limit	number	最大上传数量	9
isMultiple	boolean	是否支持多选	false
sizeType	('original' | 'compressed')[]	图片尺寸类型	原图与压缩图均有
sourceType	('album' | 'camera')[]	图片来源	相机与相册均有
imageFormat	string[]	允许的图片格式，为空不限制	[]
maxSize	number	单张图片大小上限（MB）	4
fileKeyName	string	上传文件对应的 formData key	file
header	Record<string, string>	HTTP 请求 Header	{}
formData	Record<string, any>	HTTP 请求额外的 formData	{}
params	number | string	自定义参数，在事件中回传	-

事件

事件名	说明	回调参数
complete	上传状态变化时触发	{ status, imgArr, params?, manual? }，status：1 成功 2 上传中 3 失败
remove	删除图片时触发	{ index, params? }
reupload	点击重新上传时触发	{ index }
click	点击添加按钮时触发	-

方法

通过 ref 调用组件实例方法：

方法名	说明	传入参数
uploadAllImage	一次性上传所有未上传的本地图片	serverUrl: string 接口地址
upload	使用自定义 Promise 上传	callback: (file) => Promise<string>，index?: number