uni-app怎么实现文件加解密存储

夏敏姑娘_5014

夏敏姑娘_5014

2026-10-09

754人浏览

原创

uni-app文件加解密必须先转字符串:读取文件为arraybuffer→加密→tostring()或base64编码后存储;解密逆向还原为arraybuffer才能正确使用。

uni-app怎么实现文件加解密存储

uni-app 文件加解密存储必须先转成字符串

uni-app 本身不提供直接对二进制文件(如图片、PDF、Excel)做 AES/SM4 加密后存本地的 API。所有 uni.setStorage、uni.writeFile 等存储接口,只接受 string 或 ArrayBuffer(部分平台),但加密库(如 crypto-js、sm-crypto)输出的密文默认是 CipherParams 对象或 WordArray,不能直接存。

关键动作是:读取文件 → 转为 ArrayBuffer → 加密 → .toString() 或 .toString(CryptoJS.enc.Base64) → 存字符串。解密则逆向:取字符串 → 解密还原为 WordArray → .toString(CryptoJS.enc.Utf8) 或 .sigBytes + .words 转回 ArrayBuffer。

  • H5 端用 FileReader.readAsArrayBuffer() 读取上传文件;App 和小程序需用 uni.chooseMessageFile 或 uni.chooseImage + uni.getFileSystemManager().readFile 获取临时路径再读取二进制
  • 加密前务必确认密钥(key)和初始向量(iv)在跨端时字节长度一致:AES-256 要 32 字节 UTF8 密钥,CBC 模式下 iv 必须 16 字节,否则 iOS App 会静默失败
  • 不要用 CryptoJS.enc.Utf8.parse(fileContent) 直接解析二进制 —— 这会导致乱码,必须用 CryptoJS.enc.Base64.parse(base64Str) 或原生 Uint8Array.from(arrayBuffer) 构造输入

小程序/APP 端写入加密文件要绕过 base64 编码陷阱

很多开发者把文件转成 Base64 后 AES 加密,再存到 uni.setStorage,结果在微信小程序里解密失败,报 Invalid IV 或空字符串。根本原因是:微信小程序对 setStorage 的 value 做了隐形截断或换行符归一化,而 Base64 字符串若含 \n(比如从 PEM 公钥或某些编码器生成),会被抹掉,导致解密时 IV 错位。

正确做法是:加密后统一用 CryptoJS.enc.Base64.stringify(encrypted.ciphertext) 提取纯 Base64 密文部分(不含 salt、iv 等元信息),再手动拼接 iv(Base64 编码后)作为前缀,例如 ${ivB64}:${cipherB64};解密时按 : 分割,分别 Base64 解码还原 iv 和密文。

  • 避免使用 encrypted.toString()(它默认带 salt 和格式头,不同平台解析不一致)
  • App 端若用 plus.android 写入 SD 卡,加密后必须调 new java.lang.String(bytes, "UTF-8") 转字符串,不能传原始 byte[],否则 Android 会丢高位字节
  • 微信小程序中,uni.getFileSystemManager().writeFile 接收 data 类型为 string | ArrayBuffer,若传加密后的 Base64 字符串,记得设 encoding: 'base64',否则写入的是明文字符而非二进制

解密后还原文件需重建 ArrayBuffer

加密文件最终目的是能被其他应用或系统识别,所以解密后不能只返回字符串,必须还原成标准 ArrayBuffer 才能用于 uni.downloadFile、uni.openDocument 或 Canvas 渲染。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

常见错误是:用 CryptoJS.enc.Utf8.stringify(decrypted) 得到字符串再转 TextEncoder().encode() —— 这仅适用于 UTF8 文本,对图片/PDF 会损坏二进制结构。真正安全的方式是拿到 decrypted 的 sigBytes 和 words 数组,逐字构造 Uint8Array:

const words = decrypted.words;
const sigBytes = decrypted.sigBytes;
const u8 = new Uint8Array(sigBytes);
for (let i = 0; i >> 2];
    u8[i] = (word >>> (24 - (i % 4) * 8)) & 0xff;
}
const arrayBuffer = u8.buffer;
  • 该逻辑必须封装在工具函数中,不能依赖 JSON.stringify 或 atob,后者对非 ASCII 数据(如图片)不可靠
  • 解密后校验 arrayBuffer.byteLength 是否与原始文件一致,不一致说明密钥/IV/模式不匹配,立即中断后续操作
  • 大文件(>5MB)建议分块加解密,避免内存溢出;uni-app 的 H5 端尤其要注意,iOS Safari 对单次 ArrayBuffer 分配有限制

国密 SM4 在文件加密中比 AES 更适合国内合规场景

如果你的应用面向政务、金融或国企客户,单纯 AES 可能不满足等保或密评要求。SM4 是国密标准,且 miniprogram-sm-crypto 已支持全平台(包括 H5、微信/支付宝/百度小程序、App)。但它默认只支持字符串输入,对文件需手动桥接。

流程是:文件 → ArrayBuffer → new Uint8Array(arrayBuffer) → sm4.doEncrypt(uint8Arr, key, { mode: 'cbc', iv }) → 返回 Uint8Array → String.fromCharCode(...) 转字符串存;解密时反向操作,并用 new Uint8Array([...str].map(c => c.charCodeAt(0))) 还原。

  • SM4 的 key 和 iv 都必须是 16 字节(128 bit),不能像 AES 那样用 32 字节密钥;用 sm4.generateKey() 生成的 hex 字符串需用 hexToBytes() 转为 Uint8Array
  • H5 端使用 SM4 时,确保构建时已启用 es6 支持,否则 Uint8Array 方法在低版本安卓 WebView 中会报错
  • 注意:SM4 加密后数据长度一定是 16 字节对齐,原始文件末尾不足时自动补位,解密后需按原始长度截断,否则打开 PDF 会提示“损坏”

文件加解密不是“套个算法就完事”,核心难点始终在二进制 ↔ 字符串 ↔ ArrayBuffer 的三重转换一致性上。哪怕密钥完全正确,一个平台用了 atob、另一个用了 CryptoJS.enc.Base64.parse,结果就差一个字节,整个文件就废了。动手前先在各端跑通最小闭环:选一张 1KB 的 PNG,加密 → 存 → 取 → 解密 → uni.openDocument 打开,成功了再扩业务逻辑。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2343

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5043

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6130

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5658

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

803

5

FrankenPHP集成Laravel详细教程
FrankenPHP集成Laravel详细教程

本专题提供FrankenPHP集成Laravel的详细配置指南,全面解析运行原理、开发环境搭建、Caddyfile配置、Octane工作模式、数据库连接、队列任务、定时任务和生产环境优化,解决部署过程中常见的报错与兼容性问题。

2026.10.08

40

20

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

2026.09.30

140

10

LLVM RISC-V参数配置教程
LLVM RISC-V参数配置教程

本专题介绍LLVM对RISC-V基础ISA和扩展的支持方式,涵盖RV32、RV64、标准扩展、实验性扩展、厂商扩展、-menable-experimental-extensions和版本差异。

2026.09.30

140

14

LLVM IR中间表示入门指南
LLVM IR中间表示入门指南

本专题整理LLVM IR的核心概念,包括中间表示作用、模块结构、函数、基本块、SSA形式、类型系统和常见语法,帮助新手理解LLVM编译流程中的关键层。

2026.09.30

100

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习