当前位置: 首页 > 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营销枢纽凭借其在数字化转型领…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

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

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

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...