当前位置: 首页 > 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…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

leetcode73-矩阵置零

leetcode 73 思路 记录 0 元素的位置&#xff1a;遍历整个矩阵&#xff0c;找出所有值为 0 的元素&#xff0c;并将它们的坐标记录在数组zeroPosition中置零操作&#xff1a;遍历记录的所有 0 元素位置&#xff0c;将每个位置对应的行和列的所有元素置为 0 具体步骤 初始化…...

向量几何的二元性:叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...

接口 RESTful 中的超媒体:REST 架构的灵魂驱动

在 RESTful 架构中&#xff0c;** 超媒体&#xff08;Hypermedia&#xff09;** 是一个核心概念&#xff0c;它体现了 REST 的 “表述性状态转移&#xff08;Representational State Transfer&#xff09;” 的本质&#xff0c;也是区分 “真 RESTful API” 与 “伪 RESTful AP…...