uni-app 视频上传功能 实现将视频上传到腾讯云

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app 视频上传功能 实现将视频上传到腾讯云

视频上传,或者录制视频上传到服务器或者第三方平台!

开发环境 版本号 项目创建方式
4 回复

uni本身不是有上传接口吗?


对uni本来就有

uniapp有限制时间,有办法解决吗

在uni-app中实现将视频上传到腾讯云,通常需要以下几个步骤:

  1. 配置腾讯云COS SDK:首先,你需要在腾讯云上创建一个存储桶(Bucket),并获取相关的SecretId、SecretKey和Region信息。然后,在uni-app项目中引入腾讯云的COS SDK。

  2. 获取视频文件:通过uni-app的文件选择器API获取视频文件。

  3. 上传视频文件:使用腾讯云COS SDK提供的上传接口,将视频文件上传到指定的存储桶中。

以下是一个简单的代码示例,展示了如何在uni-app中实现这一功能:

1. 安装腾讯云COS SDK

manifest.json中添加依赖(如果SDK支持npm安装,则可以使用npm安装):

"dependencies": {
    "cos-js-sdk-v5": "^5.6.47" // 请根据最新版本进行调整
}

然后在pages/index/index.vue中引入SDK:

import COS from 'cos-js-sdk-v5';

2. 获取视频文件

使用uni-app的文件选择器API:

uni.chooseVideo({
    sourceType: ['album', 'camera'],
    maxDuration: 60,
    camera: 'back',
    success: (res) => {
        this.videoTempFilePath = res.tempFilePath;
        this.uploadVideo(this.videoTempFilePath);
    }
});

3. 上传视频文件

配置并上传视频文件:

methods: {
    uploadVideo(filePath) {
        const cos = new COS({
            getAuthorization: function (options, callback) {
                // 在这里获取临时密钥,可以通过你的后端服务器获取
                uni.request({
                    url: 'https://your-backend-server.com/get-cos-credentials',
                    method: 'POST',
                    success: (res) => {
                        const credentials = res.data;
                        const auth = {
                            TmpSecretId: credentials.TmpSecretId,
                            TmpSecretKey: credentials.TmpSecretKey,
                            XCosSecurityToken: credentials.XCosSecurityToken,
                            ExpiredTime: credentials.ExpiredTime,
                        };
                        callback(auth);
                    },
                    fail: (err) => {
                        console.error('获取临时密钥失败', err);
                    }
                });
            }
        });

        const params = {
            Bucket: 'your-bucket-name',
            Region: 'your-region',
            Key: 'path/to/your/video/' + new Date().getTime() + '.mp4',
            StorageClass: 'STANDARD',
            Body: uni.getFileSystemManager().readFileSync(filePath),
            ContentType: 'video/mp4',
            onProgress: function (progressData) {
                console.log(JSON.stringify(progressData));
            }
        };

        cos.putObject(params, (err, data) => {
            if (err) {
                console.error('上传失败', err);
            } else {
                console.log('上传成功', data);
            }
        });
    }
}

以上代码展示了如何在uni-app中实现视频上传到腾讯云COS存储桶的功能。请注意,这里的临时密钥获取部分需要根据你的后端服务进行调整。

回到顶部