阿里云OSS上传视频,可分片上传

uniappH5实现 阿里云OSS上传视频 

示例图:

上传视频完整示例代码:

使用npm安装SDK开发包,安装命令为

npm install ali-oss --save

accessKeyId 和 accessKeySecret 还有 bucket 替换成你的就行。

multipartUpload 的第一个入参是: 文件路径 + 文件名称

第二个入参是文件对象

<template><view class="quiz"><!-- 	<view class="title title3">上传</view> --><!-- 添加图片 --><view class="mainAddpic"><p class="addPic"><span>选择视频</span></p><view class="ThreePic"><video v-if="locVideoUrl" :src="locVideoUrl" class="add1"></video><!-- <image class="addPic1" v-else src="@/static/upImg.png" @click="addPic" /> --><img v-else class="picMore" @click="addPic()" src="@/static/upImg.png" /></view></view><view class="btn" @click="upbtn()">上传保存</view></view>
</template><script>import OSS from 'ali-oss'import uploadFile from "@/util/uploadFile";var that;export default {data() {return {delet: "https://oss.xxx.com.cn/web/tempProject/applyClosed.png",addImg: "https://oss.xxx.com.cn/web/tempProject/addImg.png",quiz_upImg: 'https://oss.xxx.com.cn/web/tempProject/quiz_upImg.png',locVideoUrl: '',};},onLoad() {that = this;},methods: {// 添加addPic(e) {uni.chooseVideo({sourceType: ['camera', 'album'],success: (res) => {console.log('chooseVideo-res', res);this.locVideoObj = res.tempFilethis.locVideoUrl = res.tempFilePath;console.log('locVideoUrl', this.locVideoUrl);}});},async upbtn() {uni.showLoading({title:'上传中···'})const client = new OSS({// yourregion填写Bucket所在地域。以华东1(杭州)为例,Region填写为oss-cn-hangzhou。region: "oss-cn-shanghai",// 从STS服务获取的临时访问密钥(AccessKey ID和AccessKey Secret)。accessKeyId: 'LTAI5tF59uyDCJxxxxxxxKD5',accessKeySecret: 'M5or7KKsHm2RxxxxxxxxxxCjeyQT',// 从STS服务获取的安全令牌(SecurityToken)。// 填写Bucket名称,例如examplebucket。bucket: "xxxx-pap",});const progress = (p, _checkpoint) => {// Object的上传进度。console.log(p);// 分片上传的断点信息。console.log(_checkpoint);};const headers = {  // 指定Object的存储类型。'x-oss-storage-class': 'Standard', // 指定Object标签,可同时设置多个标签。//'x-oss-tagging': 'Tag1=1&Tag2=2', // 指定初始化分片上传时是否覆盖同名Object。此处设置为true,表示禁止覆盖同名Object。'x-oss-forbid-overwrite': 'true'}const result = await client.multipartUpload(`meetingminu/${this.locVideoObj.name}`, this.locVideoObj, {progress,// headers,// 指定meta参数,自定义Object的元信息。通过head接口可以获取到Object的meta数据。meta: {year: 2020,people: 'test',},});console.log('result', result);// 填写Object完整路径,例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。const head = await client.head(`meetingminu/${this.locVideoObj.name}`);console.log('head', head);uni.hideLoading()uni.showToast({title:'上传成功'})setTimeout(()=>{uni.reLaunch({url:'/pages/index/index'})},1500)},}};
</script><style lang="scss" scoped>.quiz {margin: 36rpx;position: relative;color: #102841;padding-bottom: 180rpx;.mainAddpic {width: 100%;padding: 40rpx 28rpx 50rpx;border-radius: 20rpx;margin-bottom: 20rpx;box-sizing: border-box;.ThreePic {display: flex;// justify-introduce: space-around;flex-wrap: wrap}.addPic {width: 100%;padding-left: 10rpx;padding-bottom: 10rpx;border-bottom: 1px solid #E5F1FF;span:nth-child(1) {font-family: PingFangSC-Medium, PingFang SC;font-size: 28rpx;color: grey;font-weight: bold;}span:nth-child(2) {font-size: 24rpx;color: #999;}}.picMore {width: 170rpx;height: 170rpx;border-radius: 8rpx;display: flex;margin: 30rpx auto 10rpx;position: relative;// border: 1px dashed #ccc;image {width: 88rpx;height: 88rpx;margin: 0 auto;}.add1 {width: 186rpx;height: 186rpx;border-radius: 8rpx;}.delete {position: absolute;right: 0;top: 0;z-index: 2;width: 40rpx;}.addPic1 {width: 60rpx;height: 60rpx;}}}.quiz_upImg {width: 212rpx;height: 212rpx;position: relative;left: 50%;margin-left: -106rpx;margin-top: 40rpx;}.title {// height: 100rpx;position: relative;font-size: 34rpx;font-family: Source Han Sans CN;font-weight: 500;}.title2 {margin-top: 80rpx;}.title3 {margin-top: 60rpx;}textarea {width: 83.8vw;}.xuanzhe {width: 83.8vw;position: relative;top: 22rpx;padding: 24rpx;background: #fcfcfc;border-radius: 14rpx;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);.rrr {width: 12rpx;height: 22rpx;position: absolute;right: 30rpx;margin-top: 10rpx;z-index: 3;}}textarea {position: relative;top: 22rpx;padding: 24rpx;background: #fcfcfc;border-radius: 14rpx;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);}.textarea1 {height: 70rpx;}.textarea2 {margin-top: 26rpx;height: 200rpx;}.btn {position: relative;margin: auto;margin-top: 34rpx;border-radius: 10rpx;height: 70rpx;line-height: 70rpx;width: 220rpx;left: 50%;margin-left: -110rpx;background-color: #102841;color: #fff;font-size: 32rpx;text-align: center;}.list {margin-top: 40rpx;.item {width: 90%;padding-bottom: 0rpx;min-height: 80rpx;background: #FFFFFF;box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(16, 40, 65, 0.26);border-radius: 12rpx;margin: auto;position: relative;margin-bottom: 28rpx;.red_point {margin-top: -6rpx;margin-right: 14rpx;width: 16rpx;height: 16rpx;border-radius: 50%;background-color: red;position: absolute;right: 4rpx;}.txt {line-height: 96rpx;// height: 36rpx;font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 500;color: #102841;margin-left: 30rpx;width: 470rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/615092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[开发语言][c++]:左值、右值、左值引用、右值引用和std::move()

左值、右值、左值引用、右值引用和std::move 1. 什么是左值、右值2. 什么是左值引用、右值引用3. **右值引用和std::move的应用场景**3.1 实现移动语义3.2 **实例&#xff1a;vector::push_back使用std::move提高性能** **4. 完美转发 std::forward**5. Reference 写在前面&…

【分享贴】大话ESD和浪涌

从事电子产品开发的朋友应该都知道&#xff0c;电子产品样机完成之后&#xff0c;会进入产品性能测试阶段&#xff0c;而其中的EMC&#xff08;电磁兼容&#xff09;测试则是至关重要的一项。 EMC&#xff08;电磁兼容&#xff09;又被分为两大类&#xff1a;EMI&#xff08;电…

【React 常用的 TS 类型】持续更新

1&#xff09;定义样式的 TS 类型 【 React.CSSProperties 】 一般定义样式时需要的类型限制&#xff0c;如下&#xff1a; const customStyle: React.CSSProperties {color: blue,fontSize: 16px,margin: 10px,}; 2&#xff09;定义 Input Ref 属性时的 TS 类型限制 【 R…

果然程序员的世界不是 0 就是 1

在一场轰动全球的爱情故事中&#xff0c;OpenAI 的首席执行官、同时也是打破常规的浪漫英雄&#xff0c;奥特曼&#xff0c;与他的基友奥利弗穆尔赫林在夏威夷举行了一场迷人的婚礼。在奥特曼的岛屿别墅附近&#xff0c;这对低调却又令人羡慕的新人&#xff0c;在奥特曼的哥哥杰…

webpack执行流程知识点总结

webpack的运行流程 Webpack 的运行流程是一个串行的过程&#xff0c;从启动到结束会依次执行以下流程&#xff1a; 在以上过程中&#xff0c;Webpack 会在特定的时间点广播出特定的事件&#xff0c;插件在监听到感兴趣的事件后会执行特定的逻辑&#xff0c;并且插件可以调用 We…

Java8新特性-Lambda表达式

java8 新特性 Lambda表达式 Lambda是一个匿名函数, 可以把lambda表达式理解为是一段可以传递的代码,(将代码像数据一样传递) // 比较两个整数的大小------采用匿名内部类的方式Testpublic void test1(){Comparator<Integer> comp new Comparator<Integer>() {Ov…

JAVA毕业设计120—基于Java+Springboot+vue+uniapp的智能小程序商城管理系统(源代码+数据库+15000字论文)

毕设所有选题&#xff1a; https://blog.csdn.net/2303_76227485/article/details/131104075 基于JavaSpringbootvueuniapp的智能小程序商城管理系统(源代码数据库15000字论文)120 一、系统介绍 本项目前后端分离&#xff0c;分为用户、商家、管理员三种角色 1、用户&#…

redis stream restTemplate消息监听队列框架搭建

整体思路 1. pom增加redis依赖&#xff1b; 2. 消息监听器&#xff0c;实现StreamListener接口&#xff0c;处理消息到达逻辑&#xff1b; 3. 将消息订阅bean及监听器注册到配置中&#xff1b; 1. pom <?xml version"1.0" encoding"UTF-8"?> <…

Modern C++ std::mutex底层原理

前言 我时常有这样的疑问&#xff1a; std::mutex怎么就能保证后面的语句100%安全哪&#xff1f;CPU reordering就不会把这些语句重排到mutex前面执行&#xff1f;而且各个CPU都是有L1、L2缓存的&#xff0c;如果mutex后面要访问的的变量在这些缓存中怎么办&#xff1f; 带着…

openssl3.2 - 官方demo学习 - certs

文章目录 openssl3.2 - 官方demo学习 - certs概述笔记官方的实验流程mkcerts.sh - 整理ocsprun.sh - 整理ocspquery.sh - 整理从mkcerts.sh整理出来的27个.bata1_create_certificate_directly.cmda2_Intermediate_CA_request_first.cmda3_Sign_request_CA_extensions.cmda4_Ser…

C++_纯虚函数and抽象类

纯虚函数 and 抽象类 介绍纯虚函数抽象类纯抽象类(俗称&#xff1a;接口类) 介绍 本文主要介绍 纯虚函数 和 抽象类 纯虚函数 直接看源码吧&#xff0c;纯虚函数样式为&#xff1a;virtual 类型 函数名(参数表) 0; 源码 #include<iostream> #include<string> usi…

C++ 类 对象

C 在 C 语言的基础上增加了面向对象编程&#xff0c;C 支持面向对象程序设计。类是 C 的核心特性&#xff0c;通常被称为用户定义的类型。 类用于指定对象的形式&#xff0c;是一种用户自定义的数据类型&#xff0c;它是一种封装了数据和函数的组合。类中的数据称为成员变量&a…

MyBatis Plus wrapper A and (B or C or D)

Rt&#xff0c;怎么写这个wrapper呢&#xff1f; 例如我们有一个整数列表&#xff0c;数据库中存的是整数列表的字符串形式&#xff1a; list数据库中的存储1,2,3[1,2,3] 我们想查包含某几个数字的所有行。例如如果有1&#xff0c;那么结果中要有[1,2,3]、[1]。 // A Lambd…

在 WinForms 应用中使用 FtpWebRequest 进行文件操作和数据显示

在 WinForms 应用中使用 FtpWebRequest 进行文件操作和数据显示 引言 在企业级应用或桌面程序中&#xff0c;经常需要从远程服务器获取数据&#xff0c;并在用户界面上展示这些数据。本文将通过一个实际案例&#xff0c;演示如何在 Windows Forms 应用程序中使用 FtpWebReques…

互联网大厂职场各职级P6/P7和核心能力

目录 具体能力要求总结 具体能力要求 专业工匠 p5 被别人带领p6 独立完成项目全流程&#xff0c;指导 2-3 人 乐队指挥 p7 带行政团队 7-10 &#xff0c;项目团队&#xff0c;专项团队&#xff0c;复杂系统设计 1-3 个一般系统构成p8 领域专家 垂直 3 个团队 &#xff0c;横…

Qt/C++音视频开发63-设置视频旋转角度/支持0-90-180-270度旋转/自定义旋转角度

一、前言 设置旋转角度,相对来说是一个比较小众的需求,如果视频本身带了旋转角度,则解码播放的时候本身就会旋转到对应的角度显示,比如手机上拍摄的视频一般是旋转了90度的,如果该视频文件放到电脑上打开,一些早期的播放器可能播放的时候是躺着的,因为早期播放器设计的…

SQL-条件查询与聚合函数的使用

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…

xbox无法登录、没有反应解决方法分享

如果你遇到了Xbox无法登录或没有反应的问题&#xff0c;可以尝试以下几种解决方法&#xff1a; 重启Xbox&#xff1a; 关闭Xbox。等待一分钟。重新启动Xbox。 检查Xbox Live服务状态&#xff1a; 访问Xbox Live服务状态网页&#xff08;官方网站&#xff09;检查是否有任何服务…

架构01 - 知识体系详解

架构&#xff0c;又称为知识体系&#xff0c;是指在特定领域或系统中的组织结构和设计原则。它涵盖了该领域或系统的核心概念、基础理论、方法技术以及实践经验等。架构的主要作用是提供一个全面且系统化的视角&#xff0c;帮助人们理解和应用相关知识&#xff0c;并指导系统的…

微信小程序开发WebSocket通讯

官方文档说明&#xff1a;入口 WebSocket连接的链接只支持wss加密方式&#xff0c;且只能用域名的方式 该域名还要在微信公众平台的小程序中登记才能使用&#xff0c;开发->开发管理->服务器域名->修改 该域名要和https使用的一致 以域名地址&#xff1a;dtu.aab…