前端 H5分片上传 vue实现大文件

用uniapp开发APP上传视频文件,大文件可以上传成功,但是一旦打包为H5的代码,就会一提示链接超时,我的代码中是实现的上传到阿里云

如果需要看全文的私信我

官方开发文档地址

前端:使用分片上传的方式上传大文件_对象存储(OSS)-阿里云帮助中心

找到javaScript示例,我是在这个基础上改写为uniapp可用的

服务端获取STS安全令牌等

使用STS临时访问凭证访问OSS_对象存储(OSS)-阿里云帮助中心

uniapp实现代码

注意:H5上传在界面上引用oss组件

//阿里云:H5分片上传//#ifdef H5import OSS from 'ali-oss';// #endif

ali-oss安装命令:npm i ali-oss

1、在界面上写个操作事件,调用方法:chooseFile()选择相册文件(用uni.chooseVideo还是uni.chooseFile根据需求改写)

	chooseFile() {uni.chooseVideo({sourceType: ['album'], // ['album', 'camera'],count: 999,compressed: false,maxDuration: 60,camera: 'back',success: async(res) => {// #ifdef H5const sizeInBytes = res.size;const sizeInMB = sizeInBytes / (1024 * 1024);if (sizeInMB.toFixed(2) > 2) { //大于100MB采用分片上传that.chooseAndUploadVideo(res)} else { //普通上传}// #endif})}

2、大于100mb采用分片上传。分片上传方法:chooseAndUploadVideo()

async chooseAndUploadVideo(res) {var that = thisthat.showBackCover = true; // 打开遮罩层uni.showLoading({title: that.$t('cloneindex.addclone_uploading')})const filePath = res.tempFilePath;const fileNameTemp = filePath.substring(filePath.lastIndexOf('/') + 1);var fileH5Name = ""fileH5Name = res.namevar fileH5NameStr = fileH5Name.split(".")var lengthName = fileH5NameStr.length - 1//上传文件的后缀var lastName = "." + fileH5NameStr[lengthName]//根据选择文件的后缀重命名let fileName = 's' + that.random_string(6) + '_' + new Date().getTime() + lastName;try {const result = await this.uploadFile(fileName, filePath);} catch (err) {console.error('分片上传失败:', err);}},

3、分片上传方法:uploadFile()

async uploadFile(name, filePath) {var that = thisconst params = {sourceType: "2.1",userId: this.userInfo.userId}//调用服务端接口获取sts凭证const response = await getStsACS({params});name = response.keyPrefix ? response.keyPrefix + name : nameconst client = new OSS({region: response.region ? response.region : 'oss-cn-shanghai', // 替换为你的实际区域accessKeyId: response.AccessKeyId, // 替换为你的实际 AccessKeyIdaccessKeySecret: response.AccessKeySecret, // 替换为你的实际 AccessKeySecretstsToken: response.SecurityToken, // 替换为你的实际 SecurityTokenbucket: response.bucket ? response.bucket :'wakebaoai', // 替换为你的实际存储空间名称oss-cn-shanghai.aliyuncs.com});const file = await this.getFileFromPath(filePath);const options = {progress: (p) => {},parallel: 4,partSize: 1024 * 1024,mime: 'video/mp4',};// 分片上传await client.multipartUpload(name, file, options);uni.hideLoading()that.aliUrl = response.url ? response.url : that.aliUrl//上传成功后:文件地址var savePath = that.aliUrl + "/" + name;},

根据以上代码,整合到你的项目里就可以实现分片上传

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

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

相关文章

Linux服务器Systemctl命令详细使用指南

目录 1. 基本语法 2. 基础命令速查表 3. 常用示例 3.1 部署新服务后,设置开机自启并启动 3.2 检查系统中所有失败的服务并尝试修复 3.3 查看系统中所有开机自启的服务 4. 总结 以下是 systemctl 使用指南,涵盖服务管理、单元操作、运行级别控制、…

【JVM内存结构系列】二、线程私有区域详解:程序计数器、虚拟机栈、本地方法栈——搞懂栈溢出与线程隔离

上一篇文章我们搭建了JVM内存结构的整体框架,知道程序计数器、虚拟机栈、本地方法栈属于“线程私有区域”——每个线程启动时会单独分配内存,线程结束后内存直接释放,无需GC参与。这三个区域看似“小众”,却是理解线程执行逻辑、排查栈溢出异常的关键,也是面试中高频被问的…

红帽认证升级华为openEuler证书活动!

如果您有红帽证书,可以升级以下相应的证书:👇 有RHCSA证书,可以99元升级openEuler HCIA 有RHCE证书,可以99元升级openEuler HCIP 有RHCA证书,可以2100元升级openEuler HCIE 现金激励:&#x1f4…

迭代器模式与几个经典的C++实现

迭代器模式详解1. 定义与意图迭代器模式(Iterator Pattern) 是一种行为设计模式,它提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示。主要意图:为不同的聚合结构提供统一的遍历接口。将遍历…

epoll 陷阱:隧道中的高级负担

上周提到了 tun/tap 转发框架的数据通道结构和优化 tun/tap 转发性能优化,涉及 RingBuffer,packetization 等核心话题。我也给出了一定的数据结构以及处理逻辑,但竟然没有高尚的 epoll,本文说说它,因为它不适合。 epo…

微前端架构常见框架

1. iframe 这里指的是每个微应用独立开发部署,通过 iframe 的方式将这些应用嵌入到父应用系统中,几乎所有微前端的框架最开始都考虑过 iframe,但最后都放弃,或者使用部分功能,原因主要有: url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。 UI 不同…

SQL Server更改日志模式:操作指南与最佳实践!

全文目录:开篇语**前言****摘要****概述:SQL Server 的日志模式****日志模式的作用****三种日志模式**1. **简单恢复模式(Simple)**2. **完整恢复模式(Full)**3. **大容量日志恢复模式(Bulk-Log…

git的工作使用中实际经验

老输入烦人的密码 每次我git pull的时候都要叫我输入三次烦人的密码,问了deepseek也没有尝试成功 出现 enter passphrase for key ‘~/.ssh/id_rsa’ 的原因: 在生成key的时候,没有注意,不小心设置了密码, 导致每次提交的时候都会提示要输入密码, 也就是上面的提示…

科技赋能,宁夏农业绘就塞上新“丰”景

在贺兰山的巍峨身影下,在黄河水的温柔滋养中,宁夏这片古老而神奇的土地,正借助农业科技的磅礴力量,实现从传统农耕到智慧农业的华丽转身,奏响一曲科技与自然和谐共生的壮丽乐章。一、数字农业:开启智慧种植…

imx6ull-驱动开发篇36——Linux 自带的 LED 灯驱动实验

在之前的文章里,我们掌握了无设备树和有设备树这两种 platform 驱动的开发方式。但实际上有现成的,Linux 内核的 LED 灯驱动采用 platform 框架,我们只需要按照要求在设备树文件中添加相应的 LED 节点即可。本讲内容,我们就来学习…

深度学习中主流激活函数的数学原理与PyTorch实现综述

1. 定义与作用什么是激活函数?激活函数有什么用?答:激活函数(Activation Function)是一种添加到人工神经网络中的函数,旨在帮助网络学习数据中的复杂模式。类似于人类大脑中基于神经元的模型,激…

Linux高效备份:rsync + inotify实时同步

一、rsync 简介 rsync(Remote Sync)是 Linux 系统下的数据镜像备份工具,支持本地复制、远程同步(通过 SSH 或 rsync 协议),是一个快速、安全、高效的增量备份工具。二、rsync 特性 支持镜像保存整个目录树和…

一种通过模板输出Docx的方法

起因在2个群里都有网友讨论这个问题,俺就写了一个最简单的例子。其实,我们经常遇到一些Docx的输出的需求,“用模板文件进行处理”是最简单的一个方法,如果想预览也简单 DevExpress 、Teleric 都可以,而且也支持 Web 、…

探索 List 的奥秘:自己动手写一个 STL List✨

📖引言大家好!今天我们要一起来揭开 C 中 list 容器的神秘面纱——不是直接用 STL,而是亲手实现一个简化版的 list!🎉你是不是曾经好奇过:list 是怎么做到高效插入和删除的?🔍迭代器…

mysql占用高内存排查与解决

mysql占用高内存排查-- 查看当前全局内存使用情况(需要启用 performance_schema) SELECT * FROM sys.memory_global_total; -- 查看总内存使用 SELECT * FROM sys.memory_global_by_current_bytes LIMIT 10; -- 按模块分类查看内存使用排行memory/perfor…

构建真正自动化知识工作的AI代理

引言:新一代生产力范式的黎明 自动化知识工作的人工智能代理(AI Agent),或称“智能体”,正迅速从理论构想演变为重塑各行各业生产力的核心引擎。这些AI代理被定义为能够感知环境、进行自主决策、动态规划、调用工具并持…

青少年机器人技术(四级)等级考试试卷-实操题(2021年12月)

更多内容和历年真题请查看网站:【试卷中心 -----> 电子学会 ----> 机器人技术 ----> 四级】 网站链接 青少年软件编程历年真题模拟题实时更新 青少年机器人技术(四级)等级考试试卷-实操题(2021年12月) …

最新短网址源码,防封。支持直连、跳转。 会员无广

最新短网址源码,防封。支持直连、跳转。 会员无广告1.可将长网址自动缩短为短网址,方便记忆和使用。2.短网址默认为临时有效,可付费升级为永久有效,接入支付后可自动完成,无需人工操作。3.系统支持设置图片/文字/跳转页…

缓存-变更事件捕捉、更新策略、本地缓存和热key问题

缓存-基础知识 熟悉计算机基础的同学们都知道,服务的存储大多是多层级的,呈现金字塔类型。通常来说本机存储比通过网络通信的外部存储更快(现在也不一定了,因为网络传输速度很快,至少可以比一些过时的本地存储设备速度…

报表工具DevExpress .NET Reports v25.1新版本亮点:AI驱动的扩展

DevExpress Reporting是.NET Framework下功能完善的报表平台,它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集,包括数据透视表、图表,因此您可以构建无与伦比、信息清晰的报表。 DevExpress Reporting控件日前正式发布了v25.1…