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

引用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还是Appthis.changeType = _type;// #ifdef APP-PLUSlet 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 H5this.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;// #endifconst {success,data} = await ossUpload(rey.tempFilePath, _name, 'uploads/video/',function(_ret){that.vProgress=_ret.progress});if(success){that.editVideo=data;} else{that.toast(data)}returnuni.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://xiahunao.cn/news/3018837.html

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

相关文章

Linux主机排查工具-GScan

0x01 简介 本程序旨在为安全应急响应人员对Linux主机排查时提供便利&#xff0c;实现主机侧Checklist的自动全面化检测&#xff0c;根据检测结果自动数据聚合&#xff0c;进行黑客攻击路径溯源。 0x02 项目地址 https://github.com/grayddq/GScan 0x03 CheckList检测项 自…

FTP-自用

一、登录 1、ftp服务器搭建 liunx&#xff1a;FTP服务器的搭建&#xff08;Linux&#xff09;_linux搭建ftp服务器-CSDN博客windows&#xff1a;搭建FTP服务器_ftp服务器搭建-CSDN博客 2、连接ftp服务器 ftp ip地址ftp 域名 注&#xff1a;长时间不操作自动退出 二、常用命…

rust容器、迭代器

目录 一&#xff0c;std容器 1&#xff0c;Vec&#xff08;向量、栈&#xff09; 2&#xff0c;VecDeque&#xff08;队列、双端队列&#xff09; 3&#xff0c;LinkedList&#xff08;双向链表&#xff09; 4&#xff0c;哈希表 5&#xff0c;集合 6&#xff0c;Binary…

带你一键解析微信小程序微信支付详细流程(包括开发流程+Cpolar安装+获取公网ip方法)

微信支付流程 前言微信支付方式接入流程微信支付在开发中的流程JSAPI下单小程序调起支付API开发准备Cpolar下载安装 我的代码实例总结 前言 &#x1f514;大多数小伙伴是不是还在好奇微信支付在我们的开发端是如何实现的&#xff0c;其实微信支付的技术我们直接通过引用就能完…

抢占用户|AI助力企业高效挖掘潜在客户,推动高质量转化

随着人工智能&#xff08;AI&#xff09;技术的崛起&#xff0c;企业终于可以在这个数字化时代获得一种强大的工具&#xff0c;帮助企业迅速而准确地找到潜在客户。AI不仅能够处理海量的数据&#xff0c;还能自动分析和识别潜在客户的特征和行为模式&#xff0c;为企业营销提供…

【BUUCTF】[RoarCTF 2019]Easy Java1

工具&#xff1a;hackbar发包&#xff0c;bp抓包。 解题步骤&#xff1a;【该网站有时候send不了数据&#xff0c;只能销毁靶机重试】 这里的登录界面是个天坑【迷魂弹】 直接点击help&#xff0c;然后进行打开hackbar——通过post请求&#xff0c;再通过bp抓包&#xff0c;…

鸿蒙L0软总线demo程序

软总线是鸿蒙特有的功能之一&#xff0c;本篇提供了一个运行于L0的软总线demo程序。 demo的流程&#xff1a; 1.dsoftbus_start() 入口启动函数&#xff0c;启动后循环发布、发现、发现节点后连接节点。 int dsoftbus_start() {if (init() < 0) {return -1;}if (!dsoftbu…

定时任务还可以这么玩--基于SpringBoot中的ThreadPoolTaskScheduler实现动态定时任务

Hi,大家好&#xff0c;我是抢老婆酸奶的小肥仔。 最近做了一个需求&#xff1a;将定时任务保存到数据库中&#xff0c;并在页面上实现定时任务的开关&#xff0c;以及更新定时任务时间后重新创建定时任务。 于是想到了SpringBoot中自带的ThreadPoolTaskScheduler。 在Spring…

渗透测试工具--AppInfoScanner 的安装与使用(一)

简洁 ApplicationScanner是一个快速稳定的App代码扫描工具&#xff0c;其主要功能是对ipa和apk文件进行扫描&#xff0c;以快速发现存在风险的代码。这款工具基于Python 3.7实现其主要功能&#xff0c;同时apk检测部分需要JDK 11的支持&#xff0c;因此它具备较好的跨平台特性…

旺店通·企业奇门与金蝶云星空对接集成订单查询打通销售订单新增

旺店通企业奇门与金蝶云星空对接集成订单查询打通销售订单新增 对接源平台:旺店通企业奇门 慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xff0c;先后布局流量获取、会员管理、仓库管理等其他重要经营模块。慧策…

邮件群发还能用吗

邮件群发仍然可以使用。不过&#xff0c;在进行邮件群发时&#xff0c;可能会遇到一些问题&#xff0c;如选择合适的邮件群发软件、应对垃圾邮件过滤器的挑战、管理收件人列表、邮件内容的个性化和定制、邮件投递的时间管理以及避免被列入黑名单等。 为了优化邮件群发的效果&a…

五分钟解决Springboot整合Mybaties

SpringBoot整合Mybaties 创建maven工程整合mybaties逆向代码生成 创建maven工程 1.通过idea创建maven工程如下图 2.生成的工程如下 以上我们就完成了一个maven工程&#xff0c;接下来我们改造成springboot项目。 这里主要分为三步&#xff1a;添加依赖&#xff0c;增加配置&…

Oracle-一次TX行锁堵塞事件

问题背景&#xff1a; 接用户问题报障&#xff0c;应用服务出现大量会话堆积现象&#xff0c;数据库锁堵塞严重&#xff0c;需要协助进行问题定位和排除。 问题分析&#xff1a; 登录到数据库服务器上&#xff0c;首先查看一下数据库当前的等待事件情况&#xff0c;通过gv$ses…

SQLSERVER CPU占用过高的优化

有同事反应服务器CPU过高&#xff0c;一看截图基本都是100%了&#xff0c;my god&#xff0c;这可是大问题&#xff0c;赶紧先看看。 让同事查看系统进程&#xff0c;发现是SQLServer的CPU占用比较高。首先想到的是不是报表生成的时候高&#xff0c;因为这块之前出现过问题&…

实例分割——水下垃圾数据集

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …

基于大模型的idea提炼:围绕论文和引用提炼idea之ResearchAgent

前言 对本博客比较熟悉的朋友知道&#xff0c;我司论文项目组正在基于大模型做论文的审稿(含CS英文论文审稿、和金融中文论文审稿)、翻译&#xff0c;且除了审稿翻译之外&#xff0c;我们还将继续做润色/修订、idea提炼(包含论文检索)&#xff0c;是一个大的系统&#xff0c;包…

RN封装的toast提示框组件

import React, {useState} from react; import {View,Text,Modal,ActivityIndicator,StyleSheet,TouchableOpacity,Button, } from react-native;// 接收toaseflag为是否显示toast // title为提示内容 const ToastModal ({toastflag, title}) > {return (<Modal animati…

选修选课|基于Springboot+vue的大学生选修选课系统的设计与实现(源码+数据库+文档)

大学生选修选课系统 目录 基于Springboot&#xff0b;vue的大学生选修选课系统设计与实现 一、前言 二、系统设计 三、系统功能设计 1用户信息管理 2 课程信息管理 3排课信息管理 4公告信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题…

落地护眼灯十大品牌哪款性价比高?品牌排行榜前十名全面揭晓!

落地护眼灯十大品牌哪款性价比高&#xff1f;落地护眼灯已经逐渐成为孩子日常使用率较高的电器之一&#xff0c;它的优点非常突出&#xff0c;对于学习、工作、绘画等环境都能够提供良好的健康环境&#xff0c;同时还携带多种智能调节功能&#xff0c;例如&#xff1a;入座感应…

反汇编一个ARM64的机器码

文章目录 使用objdump直接阅读ARM64手册使用反汇编网站 有下面一个机器码&#xff1a;0x929ffee9&#xff0c;如何翻译成汇编呢&#xff1f; 下面介绍几种做法&#xff1a; 使用objdump 将这个机器码写到文件中&#xff0c;然后使用objdump去反汇编 创建一个二进制文件 dd…