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

vue引入sm-crypto通过sm4对文件进行加解密,用户输入密码

对文件加密并保存:

import { sm4 } from 'sm-crypto'fetch("你的文件地址") .then(response => response.blob()) .then(byteStream => {const reader2 = new FileReader();reader2.onload = function(event) {const arrayBuffer = event.target.result;let keyBytes = new Uint8Array(arrayBuffer);let password = stringToHex("用户输入的密码");let code = sm4.encrypt(keyBytes,password, {output: 'array'})  let byteStream1 = new Blob([code], { type: 'application/octet-stream' });let link = document.createElement('a');link.href = URL.createObjectURL(byteStream1);link.download = "你保存的文件名";document.body.appendChild(link);link.click();document.body.removeChild(link);};// 以ArrayBuffer形式读取文件reader2.readAsArrayBuffer(byteStream);})function stringToHex(str) {let hex = '';for (let i = 0; i < str.length; i++) {hex += str.charCodeAt(i).toString(16);}// 如果转换后的16进制字符串长度不足32,则在前面填充0while (hex.length < 32) {hex = '0' + hex;}return hex;}

读取文件并解密:

<input type="file" id="keyInput" accept="*" @change="readKeyFile" />function readKeyFile() {const keyInput = document.getElementById('keyInput');const file = keyInput.files[0];const reader = new FileReader();reader.onload = function(event) {const arrayBuffer = event.target.result;let plainByte = JSON.parse("["+arrayBuffer+"]");let password = stringToHex("用户输入的密码");try{let pBytes = sm4.decrypt(plainByte,password, {output: 'array'});let prBytes = arrayToBuffer(pBytes);privateKeyBytes = new Uint8Array(prBytes);}catch(e){alert('文件或密码错误');return;}let decoder = new TextDecoder();let alltext = decoder.decode(privateKeyBytes);console.log(alltext)//你的文件内容};// 读取文件reader.readAsText(file);}
function stringToHex(str) {let hex = '';for (let i = 0; i < str.length; i++) {hex += str.charCodeAt(i).toString(16);}// 如果转换后的16进制字符串长度不足32,则在前面填充0while (hex.length < 32) {hex = '0' + hex;}return hex;}function arrayToBuffer(arr) {let buffer = new ArrayBuffer(arr.length);let view = new Uint8Array(buffer);for (let i = 0; i < arr.length; i++) {view[i] = arr[i];}return buffer;}

http://www.lryc.cn/news/399872.html

相关文章:

  • vue3实现无缝滚动列表(大屏数据轮播场景)
  • element ui ts table重置排序
  • python热门面试题三
  • sql monitoring 长SQL ASH AWR 都没有 未Commit or export to csv
  • 算法学习day12(动态规划)
  • Vue 3 <script setup> 使用v-bind(或简写为 :)来动态绑定图片的 src 属性
  • ​前端Vue自定义签到获取积分弹框组件设计与实现
  • 闲置服务器废物利用_离线下载_私人影院_个人博客_私人云笔记_文件服务器
  • 【Python学习笔记】调参工具Optuna + 泰坦尼克号案例
  • GPT带我学-设计模式13-策略模式
  • 【Linux】Ubuntu配置JDK环境、MySQL环境
  • 【ElasticSearch】ES 5.6.15 向量插件支持
  • Kafka 高并发设计之数据压缩与批量消息处理
  • 设计模式使用场景实现示例及优缺点(行为型模式——模板方法模式)
  • ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK
  • eNSP:防火墙设置模拟公司配置(二)
  • vue3 两个组件之间传值
  • 基于matlab的深度学习案例及基础知识专栏前言
  • 机器学习——L1 L2 范数 —>L1 L2正则化
  • 大模型时代,还需要跨端framework吗?
  • ASP.NET Core----基础学习05----将数据传递给视图文件的五种情况
  • Flutter实现局部刷新的几种方式
  • 力扣题解(回文子串)
  • 对数的基本概念
  • C双指针滑动窗口算法
  • WPF学习(6) -- WPF命令和通知
  • 升级到LVGL9的一些变化(后续发现再补充)
  • 当在多线程环境中使用 C++进行编程时,怎样确保线程安全以及如何处理线程之间的同步和通信?
  • 博物馆地图导航系统:高精度地图引擎与AR/VR融合,实现博物馆数字化转型
  • liunx作业笔记1