当前位置: 首页 > 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;}

相关文章:

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

对文件加密并保存&#xff1a; import { sm4 } from sm-cryptofetch("你的文件地址") .then(response > response.blob()) .then(byteStream > {const reader2 new FileReader();reader2.onload function(event) {const arrayBuffer event.target.result;l…...

vue3实现无缝滚动列表(大屏数据轮播场景)

实现思路 vue3目前可以通过第三方组件来实现这个需求。 下面介绍一下这个第三方滚动组件--vue3-scroll-seamless vue3-scroll-seamless 是一个用于 Vue 3 的插件&#xff0c;用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动&#xff0c;适用于展示轮播图、新…...

element ui ts table重置排序

#日常# 今天带的实习生&#xff0c;在遇到开发过程中&#xff0c;遇到了element ui table 每次查询的时候都需要重置排序方式&#xff0c;而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…...

python热门面试题三

面试题1&#xff1a;Python中的列表推导式是什么&#xff1f;请给出一个例子。 回答&#xff1a; 列表推导式&#xff08;List Comprehension&#xff09;是Python中一种非常强大且简洁的构建列表的工具。它允许你通过一个表达式来创建一个新的列表&#xff0c;这个表达式定义…...

sql monitoring 长SQL ASH AWR 都没有 未Commit or export to csv

Duration 4小时&#xff0c; Database Time 22.5&#xff0c; Session Inactive&#xff0c; 1.未Commit原因, 2.慢慢导出成csv文件&#xff1f; How is v$session status INACTIVE and v$sql_monitor status EXECUTING concurrently 2641811 Posts: 8 Jan 11, 2016 6:47P…...

算法学习day12(动态规划)

一、不同的二叉搜索树 二叉搜索树的性质&#xff1a;父节点比左边的孩子节点都大&#xff1b;比右边的孩子节点都小&#xff1b; 由图片可知&#xff0c;dp[3]是可以由dp[2]和dp[1]得出来的。(二叉搜索树的种类和根节点的val有关) 当val为1时&#xff0c;左边是一定没有节点的…...

Vue 3 <script setup> 使用v-bind(或简写为 :)来动态绑定图片的 src 属性

<img :src"images[currentIndex]" > <template> <div> <!-- 使用 v-bind 或简写为 : 来动态绑定图片的 src 属性 --> <img :src"images[currentIndex]" alt"Dynamic Image" style"width: 100px; height: a…...

​前端Vue自定义签到获取积分弹框组件设计与实现

摘要 随着前端技术的不断演进&#xff0c;开发的复杂性日益凸显。传统的整体式开发方式在面临功能迭代和修改时&#xff0c;常常牵一发而动全身&#xff0c;导致开发效率低下和维护成本高昂。组件化开发作为一种解决方案&#xff0c;通过实现模块的独立开发和维护&#xff0c;…...

闲置服务器废物利用_离线下载_私人影院_个人博客_私人云笔记_文件服务器

背景 家里有台旧windows笔记本&#xff0c;PentiumB940 2.00GHz的cpu 4G内存&#xff0c;512G硬盘 放在家里吃灰很久,最近几个月折腾折腾&#xff0c;装了linux操作系统&#xff0c;换了一个2T的硬盘 这里记录下折腾的过程,有需要的可以参考 开通公网IP 打电话给运营商一般都可…...

【Python学习笔记】调参工具Optuna + 泰坦尼克号案例

【Python学习笔记】调参工具Optuna&泰坦尼克号案例 背景前摇&#xff1a;&#xff08;省流可不看&#xff09; 最近找了份AI标注师的实习&#xff0c;但是全程都在做文本相关的活&#xff0c;本质上还是拧螺丝&#xff0c;就想着学点调参、部署什么的技能增加一些竞争力&a…...

GPT带我学-设计模式13-策略模式

概述 策略模式 例子 你可以创建一个策略工厂&#xff08;Strategy Factory&#xff09;来根据传入的 orgId 动态地选择合适的策略。以下是实现示例&#xff1a; 首先&#xff0c;定义策略接口和具体策略类&#xff1a; public interface CardPathStrategy {String generat…...

【Linux】Ubuntu配置JDK环境、MySQL环境

一、 Ubuntu配置JDK环境 在Ubuntu系统中安装JDK 8可以通过以下步骤进行&#xff1a; 打开终端。更新包列表&#xff1a; sudo apt update安装OpenJDK 8&#xff1a; sudo apt install openjdk-8-jdk验证安装是否成功&#xff1a; java -version注&#xff1a;如果系统中安…...

【ElasticSearch】ES 5.6.15 向量插件支持

参考 : https://github.com/lior-k/fast-elasticsearch-vector-scoring 下载插件 安装插件 插件目录&#xff1a; elasticsearch/plugins, 安装后的目录如下 plugins└── vector├── elasticsearch-binary-vector-scoring-5.6.9.jar└── plugin-descriptor.properties修…...

Kafka 高并发设计之数据压缩与批量消息处理

《Kafka 高性能架构设计 7 大秘诀》专栏第 6 章。 压缩&#xff0c;是一种用时间换空间的 trade-off 思想&#xff0c;用 CPU 的时间去换磁盘或者网络 I/O 传输量&#xff0c;用较小的 CPU 开销来换取更具性价比的磁盘占用和更少的网络 I/O 传输。 Kafka 是一个高吞吐量、可扩展…...

设计模式使用场景实现示例及优缺点(行为型模式——模板方法模式)

模板方法模式&#xff08;Template Method Pattern&#xff09; 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它定义了一个操作中的算法的骨架&#xff0c;将算法的一些步骤延迟到子类中。这样可以在不改变算法的结构的前提下…...

ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK

目前市面上的ETL工具众多&#xff0c;为了方便广大企业用户在选择ETL工具时有一个更直观性能方面的参考值&#xff0c;我们选取了目前市面上最流行的三款ETL工具&#xff08;ETLCloud、DataX、Kettle&#xff09;来作为本次性能传输的代表&#xff0c;虽然性能测试数据有很多相…...

eNSP:防火墙设置模拟公司配置(二)

实验拓扑&#xff1a; 实验要求&#xff08;二&#xff09;&#xff1a; 7&#xff1a; 办公设备可以通过电信连接和移动上网&#xff08;多对多NAT&#xff0c;并且需要保留一个公网IP&#xff09; 8&#xff1a; 分公司通过公网移动电信&#xff0c;访问DMZ的http服务器 9&a…...

vue3 两个组件之间传值

Props 父组件可以通过 props 将数据传递给子组件。这是最常见的组件间通信方式 <!-- 父组件 --><template><ChildComponent :message"parentMessage" /></template><script>import ChildComponent from ./ChildComponent.vue;export…...

基于matlab的深度学习案例及基础知识专栏前言

专栏简介 内容涵盖深度学习基础知识、深度学习典型案例、深度学习工程文件、信号处理等相关内容&#xff0c;博客由基于matlab的深度学习案例、matlab基础知识、matlab图像基础知识和matlab信号处理基础知识四部分组成。 一、 基于matlab的深度学习案例 1.1、matlab:基于模…...

机器学习——L1 L2 范数 —>L1 L2正则化

1、L1范数和L2范数是机器学习和数据分析中经常使用的两种范数&#xff0c;它们之间存在多个方面的区别。 以下是关于L1范数和L2范数区别的详细解释&#xff1a; 一、定义差异 L1范数&#xff1a;也被称为曼哈顿范数&#xff0c;是向量元素的绝对值之和。对于一个n维向量x&am…...

非结构化网格数据处理:从传统插值到GNN与PINNs的AI求解器演进

1. 项目概述&#xff1a;当计算物理遇上非结构化网格在计算流体力学、结构力学、环境模拟这些硬核的工程与科学领域&#xff0c;我们每天都在和“网格”打交道。你可以把网格想象成覆盖在复杂物体&#xff08;比如一架飞机机翼、一座大坝&#xff0c;或者一片海洋&#xff09;表…...

ml_edm:基于成本敏感的时间序列早期分类Python工具包详解

1. 项目概述在工业监控、医疗诊断和金融风控这些领域&#xff0c;我们常常面对一个共同的困境&#xff1a;数据是随着时间一点点“流”进来的&#xff0c;但决策却不能等到所有数据都齐备了再做。比如&#xff0c;一台设备传感器传回的振动信号刚开始出现异常&#xff0c;你是立…...

Cortex-R82集成ELA-600调试模块的信号连接问题解析

1. Cortex-R82与ELA-600集成时的信号连接问题解析在基于Arm Cortex-R82处理器的开发过程中&#xff0c;集成ELA-600&#xff08;Embedded Logic Analyzer&#xff09;调试模块是一个常见但容易产生困惑的环节。许多工程师在YAML配置文件中添加ELA-600支持后&#xff0c;会发现系…...

PlayAI在特殊教育中的突破性应用:自闭症儿童社交训练响应率提升4.8倍的神经反馈模型首次公开

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;PlayAI教育领域应用案例 PlayAI 是一个面向教育场景的轻量级AI交互平台&#xff0c;支持教师快速构建可对话、可评估、可追踪的学习代理。其核心优势在于无需深度学习背景即可配置多轮问答逻辑、知识图谱链接…...

FairyGUI GLoader动效动态接管与运行时替换实战

1. 这不是简单的“换图”&#xff0c;而是动效资源的动态接管机制在 FairyGUI for Unity 项目里&#xff0c;当你看到GLoader组件上挂着一个.png或.jpg&#xff0c;心里默认它就是张静态图——但一旦你给它赋值一个MovieClip、GAnimation&#xff0c;甚至是一段从 AssetBundle …...

Unity编辑器Play模式状态保存与还原原理详解

1. 这个插件不是“自动存档”&#xff0c;而是 Unity 编辑器生命周期里的状态锚点你有没有在 Unity 编辑器里调试一个带复杂初始化逻辑的 MonoBehaviour&#xff0c;刚把 Inspector 里十几个字段调到理想值、挂好引用、连好事件&#xff0c;一按 Play&#xff0c;对象瞬间变空—…...

空馈方法导向的高增益天线方法【附模型】

✨ 长期致力于环焦反射面、反射阵、透射阵、相位效率、宽带、高效率、低剖面、口径场叠加、轨道角动量研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09…...

保姆级教程:用STM32F103ZET6+超声波+红外模块,从零搭建一个能报警的智能循迹小车

从零构建STM32智能循迹避障小车的全流程实战指南 在创客教育和嵌入式开发领域&#xff0c;智能小车一直是入门学习的经典项目。它不仅融合了传感器技术、电机控制和嵌入式编程等核心知识点&#xff0c;更能让学习者在完成一个完整产品的过程中获得成就感。本文将手把手带你使用…...

RK3588核心板开发全解析:从8K编解码到NPU AI应用实战

1. 项目概述&#xff1a;当“八核”遇上“8K”&#xff0c;一块核心板能做什么&#xff1f;最近拿到了一块RK3588的核心板套件&#xff0c;这玩意儿在圈子里热度一直不低。RK3588这颗芯片&#xff0c;从发布之初就被贴上了“旗舰”、“全能”的标签&#xff0c;八核CPU、8K编解…...

深度学习分段逼近实战:激活函数硬件友好型实现指南

1. 项目概述&#xff1a;为什么“分段逼近”不是数学游戏&#xff0c;而是深度学习落地的命脉“Mastering Deep Learning: The Art of Approximating Non-Linearities with Piecewise Estimations Part-2”——这个标题里藏着一个被太多教程刻意绕开的真相&#xff1a;深度学习…...