FirstUI UNI版

UploadVideo 视频上传 VIP专属 V1.7.0+

概述

UploadVideo 视频上传，拍摄或从手机相册中选择视频进行上传。

# 支持平台

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

温馨提示

  • 组件内部使用了 fui-icon（字体图标）组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。
  • App安卓端选择的视频最大只支持180MB。
  • camera 部分 Android 手机下由于系统 ROM 不支持无法生效，打开拍摄界面后可操作切换。
  • sourceType 值在 H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册，部分浏览器也无法限制是否使用相机。
  • H5平台：支持的视频格式视浏览器而定，一般通用的都支持：mp4、webm 和 ogg。
  • 小程序平台：各小程序平台视频支持程度不同，详见各家文档。
  • App平台：使用 video 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。此模块体积较大，非默认内置。
  • HBuilderX内置浏览器，使用video标签暂时存在问题，请先使用其他外部浏览器。

# 引入

以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiUploadVideo from "@/components/firstui/fui-upload-video/fui-upload-video.vue"
export default {
	components:{
		fuiUploadVideo
	}
}
1
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

# 代码演示

部分示例演示，完整使用请参考示例程序以及文档API。
选择后立即上传

通过 immediate 属性设置是否立即上传，url 属性设置上传接口地址。

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<fui-upload-video immediate :url="url" ref="upload" @success="success" @error="error" @complete="complete"></fui-upload-video>
1
data() {
	return {
		//上传接口地址
		url: 'https://ffa.firstui.cn/api/example/upload-file',
		//上传状态，用于保存或其他操作时做判断
		status: '',
		//上传的视频地址列表
		urls: []
	}
},
methods: {
	//上传成功时触发
	success(e) {
		console.log(e)
		//e.res 为服务器返回数据
		//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
		let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
		this.status = e.status
		if (res.data.url) {
			//处理结果返回给组件 
			//res.data.url为上传成功后返回的视频地址
			//e.index为视频索引值
			this.$refs.upload.result(res.data.url, e.index)
		}
	},
	//上传失败时触发
	error(e) {
		this.status = e.status
	},
	//选择视频或上传完成时触发
	complete(e) {
		this.status = e.status
		this.urls = e.urls
		if (this.status === 'success' && e.action === 'upload') {
			this.fui.toast('上传完成！')
			//已上传完成的视频列表 this.urls
			console.log(this.urls)
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
调用 start 方法上传

通过 background 属性设置选择框背景色，addColor 属性设置加号颜色，fileList 属性设置默认展示的视频列表，url 属性设置上传接口地址。

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<view class="fui-btn__box">
	<fui-button type="gray" width="400rpx" height="84rpx" text="开始上传" bold @click="startUpload">
	</fui-button>
</view>
<fui-upload-video :width="340" :max="2" background="#333" addColor="#d1d1d1" :fileList="fileList" :url="url" ref="upload" @success="success" @error="error" @complete="complete"></fui-upload-video>
1
2
3
4
5
data() {
	return {
		//上传接口地址
		url: 'https://ffa.firstui.cn/api/example/upload-file',
		//上传状态，用于保存或其他操作时做判断
		status: '',
		//初始化已上传的视频列表
		fileList: ['https://ffa.firstui.cn/uploadfile/220831211231709.mp4'],
		//上传的视频地址列表
		urls: []
	}
},
onLoad() {
	this.urls = this.fileList
},
methods: {
	success(e) {
		console.log(e)
		//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
		let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
		this.status = e.status
		if (res.data.url) {
			//处理结果返回给组件 
			//data.url为上传成功后返回的视频地址
			//e.index为视频索引值
			this.$refs.upload.result(res.data.url, e.index)
		}
	},
	error(e) {
		this.status = e.status
		uni.showModal({
			content: JSON.stringify(e)
		})
	},
	complete(e) {
		this.status = e.status
		this.urls = e.urls
		if (this.status === 'success' && e.action === 'upload') {
			this.fui.toast('上传完成！')
			//已上传完成的视频列表 this.urls
			console.log(this.urls)
		}
	},
	//点击按钮触发上传操作
	startUpload() {
		if (!this.status || this.status !== 'preupload') {
			this.fui.toast('请选择需要上传的视频！')
			return
		}
		//开始上传
		this.$refs.upload.start()
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
调用 upload 方法上传 V1.9.8+

通过 call-upload 属性设置是否调用 upload 方法进行上传，@reupload 方法为点击重新上传按钮时触发事件。

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

<fui-upload-video ref="uploader" @reupload="reUpload" @complete="complete"></fui-upload-video>
<view class="fui-btn__box">
	<fui-button :margin="['48rpx','0']" type="gray" btn-size="medium" text="调用upload方法上传" bold
		@click="callUpload">
	</fui-button>
</view>
1
2
3
4
5
6
data() {
	return {
		//上传接口地址
		url: 'https://ffa.firstui.cn/api/example/upload-file',
		//上传状态，用于保存或其他操作时做判断
		status: '',
		//上传的图片地址列表
		urls: []
	}
},
methods: {
	/*
	   以下为调用upload方法手动上传的所有方法内容
	*/
	//调用upload方法上传时传入的回调函数
	uploadFile(filePath, index) {
		//filePath：上传的临时文件路径；index：位置索引值（更新上传进度使用）
		console.log('upload filePath', filePath)
	
		// 文件上传的函数，返回一个promise
		//上传成功后返回上传后的视频地址，上传失败则返回false即可
		return new Promise((resolve, reject) => {
			//调用api上传，所有需要参数自行补充
			const uploadTask = uni.uploadFile({
				url: this.url,
				name: 'file',
				// header: {},
				// formData: {},
				filePath: filePath,
				success: (res) => {
					//以下成功或失败逻辑根据接口自行处理
					const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
					if (data.statusCode === 200) {
						//返回上传成功后的视频（约定返回格式，不可修改）
						resolve(data.data.url)
					} else {
						//上传失败（约定返回格式，不可修改）
						reject(false)
					}
				},
				fail: (res) => {
					//上传失败（约定返回格式，不可修改）
					reject(false)
				}
			})
			//更新上传进度
			uploadTask.onProgressUpdate((res) => {
				//调用方法更新组件内当前视频上传进度
				this.$refs.uploader.setProgress(res.progress, index)
			});
		})
	},
	callUpload() {
		//注意：此方法上传函数需要页面自行实现，如上 uploadFile（当组件内部方法无法满足时使用该方法自行去实现上传）
		if (!this.status || this.status !== 'preupload') {
			this.fui.toast('请选择需要上传的视频！')
			return
		}
		//调用upload 方法上传，并传入函数，此时请勿传入index值
		this.$refs.uploader.upload(this.uploadFile)
	},
	//重新上传
	reUpload(e) {
		/*
		  callUpload 中上传失败时会出现重新上传按钮
		  点击重新上传按钮触发（仅call-upload 为true 时有效）
		*/
		//当前上传按钮索引值
		console.log(e.index)
		//调用upload 方法上传，并传入函数，且此时需要传入index值
		this.$refs.uploader.upload(this.uploadFile, e.index)
	},
	complete(e) {
		console.log(e)
		this.status = e.status
		this.urls = e.urls
		if (this.status === 'success' && e.action === 'upload') {
			this.fui.toast('上传完成！')
			//已上传完成的视频列表 this.urls
			// console.log(this.urls)
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

start 方法与 upload 方法区别？

  • start 方法上传，url、name、header、formData等属性需要通过props传入，且使用组件内内置的方法进行上传。

  • upload 方法上传，需要传入一个返回Promise的文件上传的函数，上传方法需在页面自行实现，更方便扩展，用于满足更多场景需求。

# Slots

插槽名称 说明
default V1.8.0+ 用于自定义上传加号图标

# Props

属性名 类型 说明 默认值 平台差异说明
width Number, String 选择框或视频宽度，单位rpx 640 -
height Number, String 选择框或视频框高度，单位rpx 320 -
fileList Array<String> 初始化默认展示的视频列表，仅初始化使用 [ ] -
max Number, String 最多可上传的视频数量 1 -
addColor String 选择框加号颜色 #333 -
addSize V1.9.5+ Number, String 选择框加号大小，单位rpx 88 -
background String 选择框背景颜色 #eee -
radius V1.9.5+ Number, String 选择框圆角值，单位rpx 0 -
borderColor V1.9.5+ String 选择框边框颜色，设置颜色则边框生效，默认边框宽度1px - -
borderSytle V1.9.5+ String 选择框边框样式，可选值：solid、dashed、dotted solid -
isView Boolean 是否为预览模式，不可做新增/删除等操作 false -
progressColor String 已选择的进度条的颜色 #465CFF -
delColor String 删除图标颜色 #eee -
confirmDel Boolean 删除视频时是否弹框确认 false -
url String 视频上传接口地址 - -
immediate Boolean 是否立即/自动上传，为false时需要调用 start 或 upload 方法上传 false -
callUpload V1.9.8+ Boolean 是否调用 upload 方法进行上传操作，调用upload方法上传时务必传 true false -
compressed Boolean 是否压缩所选的视频源文件，默认值为 true，需要压缩。 true 微信小程序、百度小程序、字节跳动小程序、飞书小程序、京东小程序、App(HBuilder X 3.2.7+)
sourceType Array<String> album 从相册选图，camera 使用相机，默认二者都有 ['album', 'camera'] H5 平台根据浏览器的不同而表现不同，一般不可限制仅使用相册
maxDuration Number 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。 60 APP平台 1.9.7+(iOS支持，Android取决于ROM的拍照组件是否实现此功能，如果没实现此功能则忽略此属性。) 微信小程序、百度小程序、京东小程序
camera String 前置摄像头：'front'、后置摄像头：'back'，默认'back' back APP、微信小程序、京东小程序
extension Array<String> 视频后缀名范围列表，为空则不限制，如：['mp4','webm']，则仅可上传mp4与webm视频 [ ] 如果部分平台临时路径不包含后缀名则无法进行限制
size Number, String 单个视频大小限制，单位MB 20 仅 APP 2.1.0+、H5、微信小程序、京东小程序 支持
name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 file -
header Object HTTP 请求 Header, header 中不能设置 Referer { } -
formData Object HTTP 请求中其他额外的 form data { } -
param Number, String 自定义参数，事件中回传 0 -

# Events

事件名 说明 回调参数
@success 视频上传成功时触发 {
  status:上传状态
  index:视频索引
  res:服务器返回数据
  param:自定义参数
}
@error 视频上传失败时触发 {
  status:上传状态
  index:视频索引
  res:错误信息
  param:自定义参数
}
@complete 视频选择、上传完成、删除时触发 {
  status:上传状态
  urls:上传的视频列表
  action:当前动作，见下方说明
  param:自定义参数
}
@reupload V1.9.8+
点击重新上传按钮时触发，仅调用upload方法上传时有效且属性 callUpload 必须设为true
 {
  index:当前索引值
}
// status：上传状态说明
preupload：尚有等待上传的视频
uploading：尚有正在上传的视频
success：全部上传成功
error：尚有上传失败的视频

//@complete 事件action参数说明：
action有效值为：choose、upload、delete。分别代表选择视频、上传、删除视频。

//温馨提示：视频上传后触发@success 事件（非调用upload方法上传时），回调参数中包含服务器返回数据，
//根据接口返回数据处理，并将上传后的视频地址回传给组件。
1
2
3
4
5
6
7
8
9
10
11

# Methods

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.XXX访问到对应的组件实例，并调用上面的实例方法。

方法名 说明 传入参数
result
上传成功触发@success后，处理服务器返回数据，将视频地址返回给组件
 (url, index)
(视频地址,视频索引)
start 选择完视频后调用 start 方法进行上传 -
upload V1.9.8+
选择完视频后调用 upload 方法进行上传，且传入返回Promise的文件上传的函数
 (callback, index)
(上传函数,视频索引)

特别说明

  • 调用 upload 方法上传时，属性 callUpload 必须设为true（用于触发 @reupload 事件）。

  • upload 方法有两个参数，初始上传时请勿传入第二个参数（index），如果传入第二个参数，则判定为点击重新上传按钮进行上传。

// upload 方法 callback 参数详细说明，以下为示例中提供函数方法（必须传入一个返回Promise的文件上传的函数）
//传入该方法后，组件内调用并回传视频文件信息
//filePath：上传的临时文件路径，index：位置索引值（更新上传进度使用）
uploadFile(filePath, index) {
	//上传的临时文件路径；
	console.log('upload filePath', filePath)

	// 文件上传的函数，返回一个promise
	//上传成功后返回上传后的视频地址，上传失败则返回false即可
	return new Promise((resolve, reject) => {
		//调用api上传，所有需要参数自行补充
		const uploadTask = uni.uploadFile({
			url: this.url,
			name: 'file',
			// header: {},
			// formData: {},
			filePath: filePath,
			success: (res) => {
				//以下成功或失败逻辑根据接口自行处理
				const data = JSON.parse(res.data.replace(/\ufeff/g, "") || "{}")
				if (data.statusCode === 200) {
					//返回上传成功后的视频（约定返回格式，不可修改）
					resolve(data.data.url)
				} else {
					//上传失败（约定返回格式，不可修改）
					reject(false)
				}
			},
			fail: (res) => {
				//上传失败（约定返回格式，不可修改）
				reject(false)
			}
		})
		//更新上传进度
		uploadTask.onProgressUpdate((res) => {
			//调用方法更新组件内当前视频上传进度
			this.$refs.uploader.setProgress(res.progress, index)
		});
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

示例预览

# 示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

# 特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)

Last Updated: 8/18/2023, 5:05:05 PM

← SearchBar 搜索栏 →