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

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

温馨提示

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

选择后立即上传

通过 immediate 属性设置是否立即上传，url 属性设置上传接口地址。 通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<wui-upload-video immediate :url="url" ref="uploadRef" @success="success" @error="error" @complete="complete"></wui-upload-video>

//上传接口地址
const url = ref<any>(`${PORT2}/aliyunOss/uploadPicture/full`);
//上传状态，用于保存或其他操作时做判断
const status = ref<any>('');
//上传的视频地址列表
const urls = ref<any>([]);
const uploadRef = ref<any>('');
const success = e => {
    console.log(e);
    //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
    let res = JSON.parse(e.res.data.replace(/\ufeff/g, '') || '{}');
    status.value = e.status;
    if (res.data.url) {
        //处理结果返回给组件
        //data.url为上传成功后返回的图片地址
        //e.index为图片索引值
        uploadRef.value.result(res.data.url, e.index);
    }
};
const error = e => {
    status.value = e.status;
};
const complete = e => {
    status.value = e.status;
    urls.value = e.urls;
    if (status.value === 'success' && e.action === 'upload') {
        Toast('上传完成！');
        //已上传完成的视频列表 urls.value
        console.log(urls.value);
    }
};

手动上传

通过 background 属性设置选择框背景色，addColor 属性设置加号颜色，fileList 属性设置默认展示的视频列表，url 属性设置上传接口地址。 通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。

<view class="wui-btn__box">
<wui-button type="gray" width="400rpx" height="84rpx" text="开始上传" bold @click="startUpload">
</wui-button>
</view>
<wui-upload-video :width="340" :max="2" background="#333" addColor="#d1d1d1" :fileList="fileList" :url="url" ref="uploadRef" @success="success" @error="error" @complete="complete"></wui-upload-video>

//上传接口地址
const url = ref<any>(`${PORT2}/aliyunOss/uploadPicture/full`);
//上传状态，用于保存或其他操作时做判断
const status = ref<any>('');
//上传的视频地址列表
const urls = ref<any>([]);
//初始化已上传的视频列表
const fileList = ref<any>([
'https://gjwlyy-specialdisease.oss-cn-hangzhou.aliyuncs.com/prileVideo/1684835517839_.19.mp4',
]);
const uploadRef = ref<any>('');
const success = e => {
    console.log(e);
    //上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
    let res = JSON.parse(e.res.data.replace(/\ufeff/g, '') || '{}');
    status.value = e.status;
    if (res.data.url) {
        //处理结果返回给组件
        //data.url为上传成功后返回的图片地址
        //e.index为图片索引值
        uploadRef.value.result(res.data.url, e.index);
    }
};
const error = e => {
    // if (e.res.statusCode === 401) {
    //     router.push('/pages/login/index');
    //     return;
    // }
    status.value = e.status;
    uni.showModal({
        content: JSON.stringify(e),
    });
};
const complete = e => {
    status.value = e.status;
    urls.value = e.urls;
    if (status.value === 'success' && e.action === 'upload') {
        Toast('上传完成！');
        //已上传完成的图片列表 urls.value
        console.log(urls.value);
    }
};
const startUpload = () => {
    if (!status.value || status.value !== 'preupload') {
        Toast('请选择需要上传的视频！');
        return;
    }
    //开始上传
    uploadRef.value.start();
};

Slots

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

Props

属性名	类型	说明	默认值	平台差异说明
width	Number, String	选择框或视频宽度，单位rpx	640	-
height	Number, String	选择框或视频框高度，单位rpx	320	-
fileList	(Arrar[String])	初始化默认展示的视频列表，仅初始化使用	[ ]	-
max	Number, String	最多可上传的视频数量	1	-
addColor	String	选择框加号颜色	#333	-
addSize	Number, String	选择框加号大小，单位rpx	88	-
background	String	选择框背景颜色	#eee	-
radius	Number, String	选择框圆角值，单位rpx	0	-
borderColor	String	选择框边框颜色，设置颜色则边框生效，默认边框宽度1px	-	-
borderSytle	String	选择框边框样式，可选值：solid、dashed、dotted	solid	-
isView	Boolean	是否为预览模式，不可做新增/删除等操作	false	-
progressColor	String	已选择的进度条的颜色	#465CFF	-
delColor	String	删除图标颜色	#eee	-
confirmDel	Boolean	删除视频时是否弹框确认	false	-
url	String	视频上传接口地址	-	-
immediate	Boolean	是否立即/自动上传，为false时需要调用start方法手动上传或自行实现上传方法	false	-
compressed	Boolean	是否压缩所选的视频源文件，默认值为 true，需要压缩。	true	微信小程序、百度小程序、字节跳动小程序、飞书小程序、京东小程序、App(HBuilder X 3.2.7+)
sourceType	(Arrar[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	(Arrar[String])	视频后缀名范围列表，为空则不限制，如：['mp4','webm']，则仅可上传mp4与webm视频	[ ]	如果部分平台临时路径不包含后缀名则无法进行限制
size	Number, String	单个视频大小限制，单位MB	20	-
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:自定义参数 }

// status：上传状态说明
preupload：尚有等待上传的视频
uploading：尚有正在上传的视频
success：全部上传成功
error：尚有上传失败的视频

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

//温馨提示：视频上传后触发@success 事件，回调参数中包含服务器返回数据，
//根据接口返回数据处理，并将上传后的视频地址回传给组件。

Methods

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

方法名	说明	传入参数
result	上传成功触发@success后，处理服务器返回数据，将视频地址返回给组件	(url, index) (视频地址,视频索引)
start	手动上传时，选择完视频后调用，开始上传	-