uniapp对接oss视频上传+压缩

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
对象存储 OSS,内容安全 1000次 1年
简介: uniapp对接oss视频上传+压缩

与其在绝望和挣扎中苟活,不如在希冀和盼望中死亡。——纪伯伦

首先是文件上传的代码:

module.exports = {
  getUUID() { //生成UUID
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
      return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
    })
  },
  beforeUpload({
    file,
    module
  }) {
    let _self = this;
    return new Promise((resolve, reject) => {
      this.policy(module)
        .then(response => {
          resolve({
            policy: response.data.policy,
            signature: response.data.signature,
            ossaccessKeyId: response.data.accessid,
            key: response.data.dir + this.getUUID() + "${filename}",
            dir: response.data.dir,
            host: response.data.host
          });
        })
        .catch(err => {
          reject(err);
        });
    });
  },
  policy(module) {
    return new Promise((resolve, reject) => {
      uni.request({
                // 在这改获取oss签证的接口
        url: 'http://获取签证的接口/' + 'oss',
        data: {
          module
        },
        success: (res) => {
          if (res.data.success) {
            resolve(res.data)
          } else {
            reject(res)
          }
        },
        fail: (err) => {
          reject(err)
        }
      });
    })
  },
  uploadFile({
    file,
    module,
    response,
    limit = 5242880
  }) {
    console.log("uploadFile: ", {
      file,
      module,
      response
    })
    // 限制5M,单位B
    if (!file) {
      uni.showToast({
        title: "读取文件失败",
        icon: 'none'
      });
      return false;
    }
    if (file.size > limit) {
      uni.showToast({
        title: "超过限制大小",
        icon: 'none'
      });
      return false;
    }
    let filename = file.path.substr(file.path.lastIndexOf("/") + 1)
    this.beforeUpload({
      file,
      module
    }).then(res => {
      let options = {
        url: res.host,
        name: 'file',
        filePath: file.path,
        formData: res,
        success: ossCallBack => {
          console.log({
            ossCallBack,
            filename
          })
          response(res.host + "/" + res.key.replace("${filename}", filename))
        },
        fail: console.error
      }
      console.log(options)
      uni.uploadFile(options)
    }).catch(console.error)
  }
}


然后是视频上传+压缩

<script>
const oss = require('@/utils/oss.js');
export default {
    methods: {
    upload(file, { contentType }) {
      console.log({ file });
      console.log({ contentType });
      let messageType = '';
      let content = file.path;
      let limit;
      switch (contentType) {
        case 1:
          messageType = 'IMAGE';
          limit = 2097152;
          break;
        case 4:
          messageType = 'VIDEO';
          limit = 10485760;
          break;
      }
      oss.uploadFile({
        file,
        module: 'chat',
        limit,
        response: filePath => {
          console.log('File upload success!');
          console.log({ filePath });
                    // 上传完成结束回调
        }
      });
    },
    onImage() {
      uni.chooseImage({
        sourceType: ['album'],
        success: res => {
          res.tempFiles.forEach(file => {
            this.upload(file, {
              contentType: 1
            });
          });
        }
      });
    },
    onVideo() {
      uni.chooseVideo({
        count: 1,
        compressed: true,
        sourceType: ['album', 'camera'],
        success: res => {
          console.log({ res });
                    // 这块是自定义压缩,需要在上方compressed设置为false关闭默认上传压缩
          // console.log('压缩前大小:: ', res.size / (1024 * 1024) + 'KB');
          // uni.getVideoInfo({
          //  src: res.tempFilePath,
          //  success: ({ fps, bitrate }) => {
          //    console.log({ fps, bitrate });
          //    uni.compressVideo({
          //      src: res.tempFilePath,
          //      quality: 'high',
          //      bitrate,
          //      fps,
          //      resolution: 1,
          //      success: res => {
          //        console.log({ res });
          //        console.log('压缩后大小:: ', res.size / (1024 * 1024) + 'KB');
          //        this.upload({ path: res.tempFilePath, size: res.size }, { contentType: 4 });
          //      }
          //    });
          //  }
          // });
          console.log('视频大小:: ', res.size / (1024 * 1024) + 'KB');
          this.upload({ path: res.tempFilePath, size: res.size }, { contentType: 4 });
        }
      });
    },
    onShoot() {
      uni.chooseImage({
        sourceType: ['camera'],
        success: res => {
          this.upload(res.tempFiles[0], {
            contentType: 1
          });
        }
      });
    }
  }
};
</script>
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
|
6天前
|
存储 对象存储 索引
对象存储OSS-m3u8视频私有权限
当上传至私有存储桶的M3U8视频缺少签名信息时,会导致播放失败(403错误)。解决方案是使用OSS的动态签名机制,在首次访问M3U8文件时,通过在URL中添加`x-oss-process=hls/sign`参数,OSS将自动对所有TS切片地址进行签名,确保视频正常播放。
19 2
|
27天前
|
弹性计算 数据管理 应用服务中间件
活动实践 | 借助OSS搭建在线教育视频课程分享网站
本教程指导用户在阿里云ECS实例上搭建在线教育网站,包括重置ECS密码、配置安全组、安装Nginx、创建网站页面、上传数据至OSS、开通OSS传输加速、配置生命周期策略及清理资源等步骤,实现高效、低成本的数据管理和网站运营。
活动实践 | 借助OSS搭建在线教育视频课程分享网站
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
105 2
|
3月前
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
152 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的医院综合管理系统附带文章源码部署视频讲解等
53 5
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
90 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
100 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
92 3
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
73 3