UploadVideo 视频上传

选择、预览和上传视频，支持内置上传与自定义上传函数。

支持平台

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

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

基础用法

<!-- 视频选择和上传 -->
<fui-upload-video ref="videoRef" :url="uploadUrl" @success="handleUploadSuccess"
  @error="handleUploadError" />

默认选择后需调用 this.$refs.videoRef.start() 上传；上传成功后解析响应并调用 result(url, index) 返回视频地址。

属性

属性	类型	说明	官网默认值
width	Number / String	选择框或视频宽度，单位 rpx	640
height	Number / String	选择框或视频高度，单位 rpx	320
fileList	Array	初始视频列表，仅初始化使用	[]
max	Number / String	视频数量上限	1
addColor	String	加号颜色	#333
addSize	Number / String	加号大小，单位 rpx	88
background	String	选择框背景色	#eee
radius	Number / String	选择框圆角，单位 rpx	0
borderColor	String	选择框边框颜色	-
borderSytle	String	边框样式：solid、dashed、dotted	solid
isView	Boolean	是否只允许预览	false
progressColor	String	视频进度条颜色	#465CFF
delColor	String	删除图标颜色	#eee
confirmDel	Boolean	删除前是否确认	false
url	String	内置上传接口地址	-
immediate	Boolean	是否选择后立即上传	false
callUpload	Boolean	是否使用自定义 upload 方法上传	false
compressed	Boolean	是否压缩所选视频	true
sourceType	Array	来源：album、camera	['album', 'camera']
maxDuration	Number	拍摄时长上限，单位秒	60
camera	String	摄像头：front、back	back
extension	Array	允许的视频后缀，空数组不限制	[]
size	Number / String	单个视频大小上限，单位 MB	20
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, action, param }
reupload	自定义上传模式点击重新上传	{ index }
delete	删除视频	{ index }

实例提供 start()、upload(callback, index)、result(url, index)。默认插槽可替换加号。压缩、相机、大小限制等能力受平台及版本支持情况影响。

插槽

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