当前位置: 首页 > news >正文

阿里云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>

相关文章:

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

uniappH5实现 阿里云OSS上传视频 示例图&#xff1a; 上传视频完整示例代码&#xff1a; 使用npm安装SDK开发包&#xff0c;安装命令为 npm install ali-oss --save accessKeyId 和 accessKeySecret 还有 bucket 替换成你的就行。 multipartUpload 的第一个入参是&#x…...

Linux第三次课后作业

1.使用while和until语句编写脚本程序&#xff0c;计算1到100的和。 i1 s0 while(i<100) {sii} echo(s)sum0 i0 until test $num -eq 101 do #下面两个均为反斜杠 sumexpr $sum $i iexpr $num 1 done echo "the result is $sum"2.编写脚本程序备份用户指定的文件…...

WordPress后台仪表盘自定义添加删除概览项目插件Glance That

成功搭建WordPress站点&#xff0c;登录后台后可以在“仪表盘 – 概览”中看到包括多少篇文章、多少个页面、多少条评论和当前WordPress版本号及所使用的主题。具体如下图所示&#xff1a; 但是如果我们的WordPress站点还有自定义文章类型&#xff0c;也想在概览中显示出来应该…...

.Net6使用SignalR实现前后端实时通信

代码部分 后端代码 &#xff08;Asp.net core web api&#xff0c;用的.net6&#xff09;Program.cs 代码运行逻辑&#xff1a; ​1. 通过 WebApplication.CreateBuilder(args) 创建一个 ASP.NET Core 应用程序建造器。 2. 使用 builder.Services.AddControllers() 添加 MVC 控…...

基于SpringBoot+Vue的时装服饰商城购物系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…...

近4w字吐血整理!只要你认真看完【C++编程核心知识】分分钟吊打面试官(包含:内存、函数、引用、类与对象、文件操作)

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;C从基础到进阶 &#x1f3c6;&#x1f3c6;关注博主&#xff0c;随时获取更多关于C的优质内容&#xff01;&#x1f3c6;&#x1f3c6; C核心编程&#x1f30f;1 内存分区模型&#x1f384…...

pytest学习和使用-pytest如何进行分布式测试?(pytest-xdist)

1 什么是分布式测试&#xff1f; 在进行本文之前&#xff0c;先了解些基础知识&#xff0c;什么是分布式测试&#xff1f;分布式测试&#xff1a;是指通过局域网和Internet&#xff0c;把分布于不同地点、独立完成特定功能的测试计算机连接起来&#xff0c;以达到测试资源共享…...

虚拟ip可以解决所有的安全问题吗

虚拟IP&#xff08;Virtual IP&#xff09;是一种网络技术&#xff0c;可以把多台物理服务器或设备组合成一个逻辑集群&#xff0c;并且使用同一个IP地址对外提供服务。虚拟IP具有负载均衡、故障切换和高可用性等优势&#xff0c;同时还可以作为一种安全措施来增加系统的抗攻击…...

【数据库原理】(27)数据库恢复

在数据库系统中&#xff0c;恢复是指在发生某种故障导致数据库数据不再正确时&#xff0c;将数据库恢复到已知正确的某一状态的过程。数据库故障可能由多种原因引起&#xff0c;包括硬件故障、软件错误、操作员失误以及恶意破坏。为了确保数据库的安全性和完整性&#xff0c;数…...

施工企业工程管理信息化、智能化需求分析

一、引言 随着科技的飞速发展&#xff0c;信息化、智能化技术正在逐步改变各行各业的工作方式。对于施工企业而言&#xff0c;传统的工程管理方式已难以满足现代工程项目的复杂需求。为了提高效率、降低成本并确保工程的安全与质量&#xff0c;施工企业工程管理迫切需要进入信…...

Centos7 安装与卸载mysql

卸载 ps ajx | grep mysql &#xff1a; 查看当前服务器是否有mysql 没有的话就不需要卸载咯。 centos7 通过yum下载安装包通常是以.rpm为后缀&#xff0c;rpm -qa 可以查看当前服务器上所有的安装包&#xff1a; rpm -qa | grep mysql | xargs yum -y remove :将查询到的mysql…...

ASP.NET Core 的 Web Api 实现限流 中间件

Microsoft.AspNetCore.RateLimiting 中间件提供速率限制&#xff08;限流&#xff09;中间件。 它是.NET 7 以上版本才支持的中间件&#xff0c;刚看了一下&#xff0c;确实挺好用&#xff0c;下面给大家简单介绍一下&#xff1a; RateLimiterOptionsExtensions 类提供下列用…...

Mysql字段的各种时间类型

DATE: 特点&#xff1a;存储日期&#xff0c;不包含时间。示例&#xff1a; CREATE TABLE example_date (id INT PRIMARY KEY, event_date DATE ); INSERT INTO example_date (id, event_date) VALUES (1, 2023-01-11); TIME: 特点&#xff1a;存储时间&#xff0c;不包含日…...

Armv8-R AArch32 architecture概念学习

提示 该博客主要为个人学习&#xff0c;通过阅读官网手册整理而来&#xff08;个人觉得阅读官网的英文文档非常有助于理解各个IP特性&#xff09;。若有不对之处请参考参考文档&#xff0c;以官网文档为准。阅读该文章&#xff0c;可以先查看AArch64 Exception Model学习&…...

linux手动安装 vscode-server

适用场景 很多时候&#xff0c;我们需要在本机&#xff08;比如windows&#xff09;通过remote ssh访问远程服务器&#xff08;一般是ubuntu&#xff09;&#xff0c;但经常出现 vscode 一直连不上远程服务器的情况&#xff0c;看一下 log&#xff1a; 这个log表示远程服务器…...

【Maven】009-Maven 简单父子工程搭建

【Maven】009-Maven 简单父子工程搭建 文章目录 【Maven】009-Maven 简单父子工程搭建一、需求说明1、结构2、第三方库 二、工程搭建1、父工程第一步&#xff1a;创建父工程第二步&#xff1a;引入公共依赖 lombok 和管理 hutool 依赖版本 2、公共子模块第一步&#xff1a;创建…...

verilog编程题

verilog编程题 文章目录 verilog编程题序列检测电路&#xff08;状态机实现&#xff09;分频电路计数器译码器选择器加减器触发器寄存器 序列检测电路&#xff08;状态机实现&#xff09; module Detect_101(input clk,input rst_n,input data,o…...

What is `addArgumentResolvers` does in `WebMvcConfigurer` ?

addArgumentResolvers 在SpringMVC框架中&#xff0c;主要用于向Spring容器注册自定义的参数解析器。在处理HTTP请求时&#xff0c;SpringMVC会使用这些参数解析器将请求中的数据&#xff08;如查询参数、路径变量、表单数据等&#xff09;转换并注入到控制器方法的参数中。 使…...

[NSSCTF Round#16 Basic]RCE但是没有完全RCE

RCE但是没有完全RCE wp 题目代码&#xff1a; 第一关 <?php error_reporting(0); highlight_file(__file__); include(level2.php); if (isset($_GET[md5_1]) && isset($_GET[md5_2])) {if ((string)$_GET[md5_1] ! (string)$_GET[md5_2] && md5($_GET[m…...

LTD营销枢纽(乐通达)成为杭州市中小企业数字化转型遴选服务商

为推进国家中小企业数字化转型城市试点建设&#xff0c;赋能中小企业信息化、智能化、新型工业化能力水平提升&#xff0c;杭州市经信局公开招募了具备高质量服务能力的中小企业数字化转型服务商。经过公开征集、专家评审等多个环节&#xff0c;LTD营销枢纽凭借其在数字化转型领…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

Java后端检查空条件查询

通过抛出运行异常&#xff1a;throw new RuntimeException("请输入查询条件&#xff01;");BranchWarehouseServiceImpl.java // 查询试剂交易&#xff08;入库/出库&#xff09;记录Overridepublic List<BranchWarehouseTransactions> queryForReagent(Branch…...

Python学习(8) ----- Python的类与对象

Python 中的类&#xff08;Class&#xff09;与对象&#xff08;Object&#xff09;是面向对象编程&#xff08;OOP&#xff09;的核心。我们可以通过“类是模板&#xff0c;对象是实例”来理解它们的关系。 &#x1f9f1; 一句话理解&#xff1a; 类就像“图纸”&#xff0c;对…...