Upload 图片上传

选择、展示和上传图片，可使用组件内置上传或接入自定义上传函数。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 图片选择和上传 -->
<fui-upload ref="uploadRef" :url="uploadUrl" @success="handleUploadSuccess"
  @error="handleUploadError" />

在页面提供实际上传地址及事件处理方法。默认 immediate 为 false，选择后调用 this.$refs.uploadRef.start() 开始上传；成功事件中应解析服务器响应，并调用 result(url, index) 将图片地址交回组件。

属性

属性	类型	说明	官网默认值
width	Number / String	图片或选择框宽度，单位 rpx	200
height	Number / String	图片或选择框高度，单位 rpx	200
fileList	Array	初始显示的图片列表，仅初始化使用	[]
max	Number / String	图片数量上限	9
isAdd	Boolean	是否显示选择框	true
addColor	String	加号颜色	#333
addSize	Number / String	加号大小，单位 rpx	88
background	String	选择框背景色	#eee
radius	Number / String	选择框圆角，单位 rpx	0
borderColor	String	选择框边框颜色，设置后显示边框	-
borderSytle	String	边框样式：solid、dashed、dotted	solid
isDel	Boolean	是否显示删除图标	true
delColor	String	删除图标颜色	rgba(0,0,0,.6)
confirmDel	Boolean	删除前是否确认	false
url	String	内置上传接口地址	-
immediate	Boolean	是否选择后立即上传	false
callUpload	Boolean	是否使用自定义 upload 方法上传	false
sizeType	Array	原图或压缩图类型	['original', 'compressed']
sourceType	Array	选择来源：album、camera	['album', 'camera']
suffix	Array	允许的图片后缀，空数组不限制	[]
size	Number / String	单张大小上限，单位 MB	4
name	String	上传文件字段名	file
header	Object	上传请求头	{}
formData	Object	上传附加表单数据	{}
param	Number / String	事件携带的自定义参数	0

borderSytle 为官网及当前源码的属性拼写。使用 upload(callback, index) 时需设置 callUpload，上传回调应返回 Promise。

事件

事件	说明	回调参数
success / error	单张上传成功或失败	{ status, index, res, param }
complete	选择、上传完成或删除	{ status, urls, tempFiles, action, param }
preview	百度小程序点击图片预览	{ index, urls }
reupload	自定义上传模式点击重新上传	{ index }
delete	删除图片	{ index }

实例提供 start()、upload(callback, index)、result(url, index)。默认插槽可替换加号图标。选择来源、压缩能力和文件路径格式依目标平台而异。

插槽

插槽	说明
default	自定义添加图片的图标