【uniapp】阿里云OSS上传 [视频上传]

news2024/11/23 19:50:24

引用uniapp插件市场的插件,使用的是视频上传 (阿里云 oss上传)
我只使用了H5和App端,需要后端配置跨域
yk-authpup详情请参考 》》【用户告知权限申请的目的】
【插件市场】阿里云存储OSS前端直接上传(全端通用) - 前端JASON

在这里插入图片描述

<template>
<view>
	<view class="bg pd-20-30">
		<view class="">
			<view class="mg-tb-25 fbc">上传视频
				<view v-if="editVideo" @click="delVideo" class="c-d41 font-26">删除</view>
			</view>
			<view class="bg-f57 mg-t-20 h-600">
				<progress class="file-picker__progress-item" :percent="vProgress" stroke-width="4" />
				<view v-if="editVideo" class="relative wh-100p">
					<video :autoplay="false" class="wh-100p" :src="editVideo" 
					:poster="editVideo+'?x-oss-process=video/snapshot,t_100,f_jpg'"></video>
				</view>
				<view v-if="!editVideo" @click="judgment('video')" class="t_c wh-100p fcc">
					<view class="">
						<uni-icons type="videocam" size="45" color="#d8d8d8"></uni-icons>
						<view class="font-25 c-cc spa_1" style="margin-top: -15rpx;">上传效果视频</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 用户告知权限申请的目的,在App端上传视频图片等需要有权限提示(华为审核上架必备) -->
	<yk-authpup ref="authpup" :permissionID="permissionID" @changeAuth="changeAuth"></yk-authpup>
</view>
</template>

<script>
import { ossUpload } from '@/js_sdk/alioss-upload/oss.js'
export default {
	data() {
		return {
			editVideo: '',
			vProgress: 0,
			// 用户告知权限申请的目的
			changeType: '',
			soIndex: 0,
			permissionID:''
		};
	},
	methods: {
		judgment(_type) { // 判断H5还是App
			this.changeType = _type;
			// #ifdef APP-PLUS
			let that=this;
			that.permissionID = 'WRITE_EXTERNAL_STORAGE';
			if (plus.os.name == 'Android') setTimeout(()=>{ that.$refs['authpup'].open(); },200)
			if (plus.os.name == "iOS") that.changeAuth();
			// #endif
			// #ifdef H5
			this.changeAuth();
			// #endif
		},
		changeAuth() { //用户授权权限后的回调
			if(this.changeType =='video') this.chooseVideo();
		},
		chooseVideo() { // 上传视频
			let that=this;
			uni.chooseVideo({
				count: 1,
				sourceType: ['album'],
				success: async function (rey) {
					// console.log(rey)
					let _name;
					// #ifdef APP-PLUS
					_name = rey.tempFilePath;
					// #endif
					// #ifdef H5
					_name = rey.name;
					// #endif
					
					const {success,data} = await ossUpload(rey.tempFilePath, _name, 'uploads/video/',function(_ret){
						that.vProgress=_ret.progress
					});
					if(success){
						that.editVideo=data;
					} else{
						that.toast(data)
					}
					return
					uni.showLoading({ title: '上传中',mask: true });
					uni.uploadFile({
						url: that.uploadUrl,
						filePath: rey.tempFilePath,
						name: 'file',
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data)
							uni.hideLoading();
							if(res.code==1){
								that.editVideo=res.data;
							} else{
								that.toast(res.msg)
							}
						},
					});
				},
				fail: (err) => { 
					console.log(err)
					if(plus.os.name == "iOS"&&err["errMsg"]=="chooseVideo:fail No filming permission"){
						setTimeout(()=>{ that.$refs['authpup'].open(); },200)
					}
				}
			});
		},
		delVideo() {
			this.editVideo=''; 
			this.vProgress=0;
		},
	}
};
</script>

<style>
image{ pointer-events: all; }
.video_cover{
	position: absolute; top: 0; left: 0; bottom: 0; z-index: 1;
	/* background-color: rgba(1,1,1,.5); */
}
</style>

js_sdk/alioss-upload文件下的js

在这里插入图片描述

oss.js

import { Base64 } from './base64.js'
import { util } from './crypto.js'
import { HMAC } from './hmac.js'
import { SHA1 } from './sha1.js'

// ======下面这3个信息必填======
const url = '_您的URL_';
const OSSAccessKeyId = '_您的OSSAccessKeyId_';
const OssAccesskeySercet= '_您的OssAccesskeySercet_';
// console.log(uni.getStorageSync('aliossUp'))


const policyText = {
    "expiration": "2034-01-01T12:00:00.000Z", // 设置Policy的有效期,格式为UTC时间。如果Policy失效,将无法上传文件。
    "conditions": [
        ["content-length-range", 0, 1048576000] // 限制上传文件的大小,单位为字节,此处限制文件大小为1 GB。如果上传的文件大小超过此限制,文件将无法上传到OSS。如果未设置该限制,则默认文件大小最大为5 GB。
    ]
}

const policy = Base64.encode(JSON.stringify(policyText))
const bytes = HMAC(SHA1, policy, OssAccesskeySercet, { asBytes: true })
const signature = util.bytesToBase64(bytes)

// 生成文件名随机字符串
function random_string(len) {
    const strLeng = len || 32;
    const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   
    const maxPos = chars.length;
    let pwd = '';
    for (let i = 0; i < strLeng; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

// 获取文件后缀
function get_suffix(filename) {
    const pos = filename.lastIndexOf('.')
    let suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}

// dir格式:'img/'
export const ossUpload = (filePath, name, dir,onUploadProgress) => {
    const key = dir + random_string(10) + get_suffix(name)
    return new Promise((resolve, reject) => {
        const uploadTask = uni.uploadFile({
            url,
            filePath,
            name: 'file',
            formData: {
                name,
                key,
                policy,
                OSSAccessKeyId,
                success_action_status: '200',
                signature
            },
            success: () => {
                resolve({success: true, data: url+key})
            },
            fail: () => {
                reject({success: false, data: '上传失败'})
            }
        })
        // ======做了一些修改加了一个上传进度======
        uploadTask.onProgressUpdate((res) => {
            onUploadProgress(res)
			// console.log('上传进度' + res.progress);
			// console.log('已经上传的数据长度' + res.totalBytesSent);
			// console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
		});
    })
} 

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

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

相关文章

链表的回文结构(详解)

链表的回文结构&#xff08;详解&#xff09; 题目&#xff1a; 链表的回文结构 对于一个链表&#xff0c;请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法&#xff0c;判断其是否为回文结构。 给定一个链表的头指针A&#xff0c;请返回一个bool值&#xff0c;代表…

机试:字符串相关简单问题

字符移动问题 这道题的描述是这样的&#xff1a;输入一个字符串&#xff0c;将其中的数字字符移动到非数字字符之后&#xff0c;并保持数字字符和非数字字符输入时的顺序。例如&#xff1a;输入字符串“ab4f35gr#a6”,输出为“abfgr#a4356”。 以下使我试着敲的代码&#xff…

GPS与精致农业 无人机应用 农业遥感 农业类

全球定位系统是美国国防部主要为满足军事部门对海上、陆地和空中设施进行高精度导航和定位的要求而建立的。GPS系统最基本的特点是以“多星、高轨、高频、测量-测距”为体制&#xff0c;以高精度的原子钟为核心。GPS作为新一代卫星导航与定位系统&#xff0c;不仅具有全球性、全…

命名空间、C++的输入输出、缺省参数(默认参数)、函数重载

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

【Leetcode每日一题】 穷举vs暴搜vs深搜vs回溯vs剪枝_全排列 - 子集(解法2)(难度⭐⭐)(72)

1. 题目解析 题目链接&#xff1a;78. 子集 这个问题的理解其实相当简单&#xff0c;只需看一下示例&#xff0c;基本就能明白其含义了。 2.算法原理 为了生成一个给定数组 nums 的所有子集&#xff0c;我们可以利用一种称为回溯&#xff08;backtracking&#xff09;的算法…

java项目跑不起来 端口已被使用

背景 Springboot项目跑不起来&#xff0c;原因端口被占用。 解决方法 在 Windows 环境下&#xff0c;你可以按照以下步骤来查看某个端口被占用的情况&#xff0c;并停止相应的进程&#xff1a; 查看所有端口占用情况&#xff1a; 按下 Win R 键&#xff0c;打开运行窗口。…

【八十二】【算法分析与设计】2421. 好路径的数目,928. 尽量减少恶意软件的传播 II,并查集的应用,元素信息绑定下标一起排序,元素通过下标进行绑定

2421. 好路径的数目 给你一棵 n 个节点的树&#xff08;连通无向无环的图&#xff09;&#xff0c;节点编号从 0 到 n - 1 且恰好有 n - 1 条边。 给你一个长度为 n 下标从 0 开始的整数数组 vals &#xff0c;分别表示每个节点的值。同时给你一个二维整数数组 edges &#xff…

1262403-92-8,十三肽DOTA-LGEYGFQNALIVR,是一种具有特定氨基酸序列的多肽

一、试剂信息 名称&#xff1a;DOTA-Leu-Gly-Glu-Tyr-Gly-Phe-Gln-Asn-Ala-Leu-Ile-Val-Arg-COOHCAS号&#xff1a;1262403-92-8结构式&#xff1a; 二、试剂内容 DOTA-Leu-Gly-Glu-Tyr-Gly-Phe-Gln-Asn-Ala-Leu-Ile-Val-Arg-COOH是一种具有特定氨基酸序列的多肽&#xff…

Pspice for TI学习

Pspice for TI中PSpice Part Search空白解决方法 配置环境变量 Cad_PSpice_TI_Regr_Srvr https://software-dl.ti.com/pspice/S009 重新安装2023版的Pspice Pspice安装链接 打开新安装的软件即可发现PSpice Part Search可以正常使用了 VSIN各参赛的含义 VOFF直流偏置VAMPL…

探索大语言模型在信息提取中的应用与前景

随着人工智能技术的快速发展&#xff0c;大语言模型&#xff08;LLMs&#xff09;在自然语言处理&#xff08;NLP&#xff09;领域取得了显著的进展。特别是在信息提取&#xff08;IE&#xff09;任务中&#xff0c;LLMs展现出了前所未有的潜力和优势。信息提取是从非结构化文本…

算法学习:数组 vs 链表

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 &#x1f3af; 引言&#x1f6e0;️ 内存基础什么是内存❓内存的工作原理 &#x1f3af; &#x1f4e6; 数组&#xff08;Array&#xff09;&#x1f4d6; 什么是数组&#x1f300; 数组的存储&#x1f4dd; 示例代码&#…

网页翻译终极方案:DeepLX

为什么要选择 DeepL 翻译&#xff1f; DeepL 被誉为全世界最精准的机器翻译&#xff0c;比最接近他们的竞争对手准确三倍以上 看看 DeepL 和 微软翻译 的对比 &#x1f447;&#x1f447; 三句英文: Walking on eggshells during the software update. Wangs VR game is a…

c#实现音乐的“vip播放功能”

文章目录 前言1. c#窗体2. 功能3. 具体实现3.1 添加文件3.2 音乐播放3.3 其他功能 4. 整体代码和窗口5. 依赖的第三方库 前言 最近在QQ音乐里重温周杰伦的歌&#xff0c;觉得好听到耳朵怀孕&#xff0c;兴起想要下载下来反复听&#xff0c;发现QQ音乐VIP歌曲下载下来的格式居然…

【MsSQL】数据库基础 库的基本操作

目录 一&#xff0c;数据库基础 1&#xff0c;什么是数据库 2&#xff0c;主流的数据库 3&#xff0c;连接服务器 4&#xff0c;服务器&#xff0c;数据库&#xff0c;表关系 5&#xff0c;使用案例 二&#xff0c;库的操作 1&#xff0c;创建数据库 2&#xff0c;创建…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 5月8日,星期三

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年5月8日 星期三 农历四月初一 1、 我国将对法国等12国免签政策延长至2025年底&#xff0c;旅游平台加码布局入境游。 2、 财政部&#xff1a;下拨1582亿元&#xff0c;提高义务教育阶段家庭经济困难学生补助标准。 3、 4月…

STM32窗口看门狗的操作

STM32的窗口看门狗的主要功能是&#xff0c;程序过早的喂狗还有太晚喂狗&#xff0c;都会触发单片机重启&#xff0c;就是有一个时间段&#xff0c;在这个时间段内喂狗才不会触发单片机重启。 下面我就总结一下窗口看门狗的设置过程&#xff1a; 第一步&#xff1a;开启窗口看…

车辆充电桩|基于Springboot+vue的车辆充电桩管理系统的设计与实现(源码+数据库+文档)

车辆充电桩管理系统 目录 基于Springboot&#xff0b;vue的车辆充电桩管理系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1 前台功能模块 4.1.1 首页功能 4.1.2 用户后台管理 2 后台功能模块 4.2.1 管理员功能 4.2.2 维修员功能 四、数据库设计 五、核…

菜鸡学习netty源码(四)—— EventLoopGroup

1.概述 我们前面进行过分析,channel为netty网络操作的抽象类,EventLoop负责处理注册到其上的Channel处理的I/O事件;EventLoopGroup是一个EventLoop的分组,它可以获取到一个或者多个的EventLoop对象。 2.类关系图 NioEventLoopGroup的类继承图,蓝色部分为对应的java类,绿…

jQuery-1.语法、选择器、节点操作

jQuery jQueryJavaScriptQuery&#xff0c;是一个JavaScript函数库&#xff0c;为编写JavaScript提供了更高效便捷的接口。 jQuery安装 去官网下载jQuery&#xff0c;1.x版本练习就够用 jQuery引用 <script src"lib/jquery-1.11.2.min.js"></script>…

【经验分享】做多年大数据采集的经验分享:关于电商API数据采集接口做电商必备的电商API接口

国内主流电商平台包括&#xff1a; 1. 淘宝&#xff1a;阿里巴巴旗下的电子商务平台&#xff0c;以C2C和B2C交易为主要业务模式。 2. 天猫&#xff1a;阿里巴巴旗下的B2C电子商务平台&#xff0c;为品牌商和零售商提供销售渠道和服务。 3. 京东&#xff1a;一家以B2C为主营业务…