uniapp对接oss视频上传+压缩

本文涉及的产品
对象存储 OSS,标准 - 本地冗余存储 20GB 3个月
对象存储 OSS,标准 - 同城冗余存储 20GB 3个月
对象存储OSS,敏感数据保护2.0 200GB 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>
相关实践学习
通义万相文本绘图与人像美化
本解决方案展示了如何利用自研的通义万相AIGC技术在Web服务中实现先进的图像生成。
相关文章
|
3月前
|
编解码 数据处理 API
如何用阿里云OSS对图片和视频进行数据处理?
本文介绍了如何利用阿里云对象存储OSS进行图片和视频处理。OSS提供了丰富的功能,如图片的缩放、裁剪、旋转和水印添加等,用户只需在图片URL后附加处理参数即可实现自动化处理。同时,OSS还支持自定义样式模板,便于批量操作。对于视频处理,OSS支持转码、截图、拼接等功能,满足多终端播放需求。通过OSS的API和SDK,开发者可以方便地集成这些功能,提升数据管理效率。
|
4月前
|
测试技术 开发工具 git
基于WebSocket即时通讯im源码| uniapp即时通讯源码| 私有化部署SDK视频安装教程
本项目是基于 ThinkPHP7 和 Swoole 构建的即时通讯 IM 源码,打造了一个简洁美观、移动优先的渐进式 Web 应用。支持从源码构建,并提供详细的安装、配置与使用说明。仓库地址:im.jstxym.top。
|
5月前
|
编解码 监控 算法
CDN+OSS边缘加速实践:动态压缩+智能路由降低30%视频流量成本(含带宽峰值监控与告警配置)
本方案通过动态压缩、智能路由及CDN与OSS集成优化,实现视频业务带宽成本下降31%,首帧时间缩短50%,错误率降低53%。结合实测数据分析与架构创新,有效解决冷启动延迟、跨区域传输及设备适配性问题,具备快速投入回收能力。
356 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
284 2
|
12月前
|
弹性计算 数据管理 应用服务中间件
活动实践 | 借助OSS搭建在线教育视频课程分享网站
本教程指导用户在阿里云ECS实例上搭建在线教育网站,包括重置ECS密码、配置安全组、安装Nginx、创建网站页面、上传数据至OSS、开通OSS传输加速、配置生命周期策略及清理资源等步骤,实现高效、低成本的数据管理和网站运营。
活动实践 | 借助OSS搭建在线教育视频课程分享网站
|
11月前
|
存储 对象存储 索引
对象存储OSS-m3u8视频私有权限
当上传至私有存储桶的M3U8视频缺少签名信息时,会导致播放失败(403错误)。解决方案是使用OSS的动态签名机制,在首次访问M3U8文件时,通过在URL中添加`x-oss-process=hls/sign`参数,OSS将自动对所有TS切片地址进行签名,确保视频正常播放。
835 2
|
开发工具
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
阿里云点播服务web播放器sdk,短剧视频类App实现参考。仿抖音 仿陌陌 短视频 无限滑动播放 视频流。无uniapp video 原生组件的层级、遮挡、覆盖问题,适合与不同功能视图组合使用,实现丰富的应用功能。
uniapp, 短剧视频类App实现参考,支持滑动播放,仿抖音 仿陌陌 短视频 无限滑动播放 视频流
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
426 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
255 4

热门文章

最新文章

下一篇
oss云网关配置