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

vue实现小程序oss分片上传

随着小程序越来越普及,小程序上传文件必不可少,那么上传的文件大小就不可控了,小则几mb,大到好几百mb,小文件还可以,但是一到超过200mb或稍微再大些的小程序就很容易上传失败,导致功能不能继续进行。以下我们就来解决这个问题,将大文件实现分片上传

温馨提示,不要看内容多,其实很好理解,实在看起来头疼的,就运行起代码来,逐行打印就明白了,希望能帮到你。代码在最后,加油!!!

这是一份在前端(uni-app/小程序)直接对接阿里云 OSS 的“分片上传”实现,采用新版签名算法 OSS4-HMAC-SHA256(俗称 SigV4)。

v4签名官方算法地址:在Header中包含V4签名(推荐)_对象存储(OSS)-阿里云帮助中心

服务端获取sts访问凭证官方文档地址:使用STS临时访问凭证访问OSS_对象存储(OSS)-阿里云帮助中心

开发准备:安装依赖:npm install crypto-js

流程是:

  • 取 STS 临时凭证;
  • 先发起初始化分片(Init)拿到 UploadId;
  • 并发读取本地文件片段,逐片 PUT;
  • 最后 POST 完成分片(Complete),把各分片的 ETag 上报,生成最终对象。

关键概念与规范

  • CanonicalRequest:参与签名的“规范化请求字符串”,由 6 行组成:Method、CanonicalURI、CanonicalQueryString、CanonicalHeaders、AdditionalHeaders、PayloadHash。
  • StringToSign:把 CanonicalRequest 做 SHA256,再与算法名、时间、credentialScope 拼成最终待签名字符串。
  • Authorization:用派生出来的签名密钥对 StringToSign 做 HMAC-SHA256,形成签名后,连同访问键与 AdditionalHeaders 一起写入该头。
  • UNSIGNED-PAYLOAD:上传流式/分片时,不对包体求哈希,x-oss-content-sha256 与 PayloadHash 都写 UNSIGNED-PAYLOAD,以避免前端为大包体计算 sha256 的高开销。
  • 对象元数据 Content-Type 的确定时机:在“初始化分片”时确定,也就是你代码里把 content-type 设为真实文件类型的原因;后续 PUT/Complete 不会改变它。

代码分层与每段意义

  • 工具层
  • toHex、hmacSHA256、sha256HexOfString、sha256HexOfArrayBuffer:签名/哈希基础封装,arrayBufferToWordArray 用来把 ArrayBuffer 转成 crypto-js 可用的 WordArray。
  • utf8ToArrayBuffer:把 XML 等字符串转为 ArrayBuffer。
  • encodeRFC3986/encodePath:路径/参数严格 RFC3986 编码(OSS4 要求)。
  • buildCanonicalQuery:把查询参数字典规整为“按 key 排序”的 query 串;特别注意空值参数需写成 ?uploads(无等号)。
  • toLowerKeys/trimAndJoinHeaders/signedHeadersListExcluding:规整请求头(小写、去多空格、按 key 排序);AdditionalHeaders 是“参与签名的头名列表”,此实现特意把 content-type 排除在列表外,但它仍出现在 CanonicalHeaders 内。
  • 签名层
  • getSigningKey:按阿里规范派生签名密钥:aliyun_v4 + secret → kDate → kRegion → kService(oss) → kSigning('aliyun_v4_request')。
  • buildAuthorization:构建 CanonicalRequest、StringToSign、Authorization 字符串,返回三者用于调试/发送。
  • 时间
  • nowToDateTimeZ:产生 UTC 格式 YYYYMMDDTHHMMSSZ,作为 x-oss-date 与签名时间。时间漂移过大服务器会拒绝。
  • 本地文件读与 HTTP
  • statFile/readFileSlice:小程序文件系统读文件、按偏移读取分片。
  • requestBuffer:uni.request 的薄封装。
  • asyncPool:并发池,限制同一时间的分片上传并发数。
  • XML 辅助
  • parseXmlTag:解析 OSS 返回的 XML 指定标签。
  • buildCompleteXML:按 PartNumber 升序拼出 CompleteMultipartUpload XML。
  • guessContentType:按后缀猜测 Content-Type,用于 Init 请求,确保最终对象是正确媒体类型(mp4/mov/mp3 等)。

主流程 multipartUpload(opts)

   入参:filePath、objectKey、partSizeMB、maxConcurrency、onProgress、fetchSts。
  • 校验入参,statFile 获取总大小。
  • await fetchSts() 获取 STS(AK、SK、Token、bucket、region 等)。
  • 计算域名与地区:
  •     endpointRegion:形如 oss-cn-beijing
  •     signingRegion:形如 cn-beijing
  • 重要的 URI 分离:
  •     canonicalUriForSign = /${bucket}/${encodePath(objectKey)}(仅用于签名)
  •     canonicalUriForReq = /${encodePath(objectKey)}(真实请求路径)
  • 计算对象 MIME:objectContentType = guessContentType(objectKey)。
1) 初始化分片(POST ?uploads)
  • 头:host、x-oss-date、x-oss-security-token、x-oss-content-sha256: UNSIGNED-PAYLOAD、content-type: 对象真实类型。
  • 签名时用 canonicalUriForSign;请求 URL 用 canonicalUriForReq。
  • 解析响应的 UploadId。
2) 计算分片列表
  • partSize = max(100KB, partSizeMB);生成 partNumbers = [1..N]。
3) 上传每个分片(PUT ?partNumber=&uploadId= 并发)
  • 本地 readFileSlice 读 ArrayBuffer。
  • 头:content-type: application/octet-stream、x-oss-content-sha256: UNSIGNED-PAYLOAD 等。
  • 成功读取响应头 ETag,保存 [{PartNumber, ETag}]。
  • 进度回调 onProgress(loaded, total)。
4) 完成分片(POST ?uploadId=)
  • Body:CompleteMultipartUpload XML(ArrayBuffer)。
http://www.xdnf.cn/news/18593.html

相关文章:

  • 合合信息acge模型获C-MTEB第一,文本向量化迎来新突破
  • 微前端架构核心要点对比
  • C++ 使用最新 MySQL Connector/C++(X DevAPI)+ CMake 完整教程
  • 力扣 30 天 JavaScript 挑战 第38天 (第九题)学习了 语句表达式的区别 高级函数 promise async await 节流
  • 《P3623 [APIO2008] 免费道路》
  • Redis Set 类型详解:从基础命令到实战应用
  • git实战(8)git高阶命令分析【结合使用场景】
  • 本地Docker部署开源Web相册图库Piwigo与在线远程访问实战方案
  • 如何优雅解决 OpenCV 分段错误(Segfault):子进程隔离实战
  • pig框架导入总结
  • 动手学深度学习(pytorch版):第六章节—卷积神经网络(1)从全连接层到卷积
  • 新能源汽车热管理仿真:蒙特卡洛助力神经网络训练
  • Text2SQL、ChatBI简介
  • [Vid-LLM] 功能分类体系 | 视频如何被“观看“ | LLM的主要作用
  • Flink2.0学习笔记:使用HikariCP 自定义sink实现数据库连接池化
  • 一键部署开源 Coze Studio
  • 第三阶段数据库-9:循环,编号,游标,分页
  • 字节跳动开源Seed-OSS:36B参数模型以512K上下文与可控思考预算重新定义AI实用主义
  • [激光原理与应用-320]:结构设计 - Solidworks - 软件工具UI组织的核心概念
  • 解决散点图绘制算法单一导致的数据异常问题
  • STM32窗口看门狗(WWDG)深度解析:精准守护嵌入式系统的实时性
  • python学习DAY49打卡
  • SHAP分析+KOA-RIME开普勒结合霜冰算法双重优化BP神经网络+9种映射方法+新数据预测!机器学习可解释分析!
  • 【升级版】从零到一训练一个 0.6B 的 MoE 大语言模型
  • 云原生俱乐部-k8s知识点归纳(8)
  • day40-tomcat
  • k8s之 Pod 资源管理与 QoS
  • Angular初学者入门第三课——工厂函数(精品)
  • 日志搜索系统前端页面(暂无后端功能)
  • webrtc弱网-SendSideBandwidthEstimation类源码分析与算法原理