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对文件进行加解密,用户输入密码
对文件加密并保存: 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 的插件,用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新…...
element ui ts table重置排序
#日常# 今天带的实习生,在遇到开发过程中,遇到了element ui table 每次查询的时候都需要重置排序方式,而且多个排序是由前端排序。 <el-table :data"tableData" ref"restTable"> </<el-table> <script…...
python热门面试题三
面试题1:Python中的列表推导式是什么?请给出一个例子。 回答: 列表推导式(List Comprehension)是Python中一种非常强大且简洁的构建列表的工具。它允许你通过一个表达式来创建一个新的列表,这个表达式定义…...
sql monitoring 长SQL ASH AWR 都没有 未Commit or export to csv
Duration 4小时, Database Time 22.5, Session Inactive, 1.未Commit原因, 2.慢慢导出成csv文件? How is v$session status INACTIVE and v$sql_monitor status EXECUTING concurrently 2641811 Posts: 8 Jan 11, 2016 6:47P…...
算法学习day12(动态规划)
一、不同的二叉搜索树 二叉搜索树的性质:父节点比左边的孩子节点都大;比右边的孩子节点都小; 由图片可知,dp[3]是可以由dp[2]和dp[1]得出来的。(二叉搜索树的种类和根节点的val有关) 当val为1时,左边是一定没有节点的…...
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自定义签到获取积分弹框组件设计与实现
摘要 随着前端技术的不断演进,开发的复杂性日益凸显。传统的整体式开发方式在面临功能迭代和修改时,常常牵一发而动全身,导致开发效率低下和维护成本高昂。组件化开发作为一种解决方案,通过实现模块的独立开发和维护,…...
闲置服务器废物利用_离线下载_私人影院_个人博客_私人云笔记_文件服务器
背景 家里有台旧windows笔记本,PentiumB940 2.00GHz的cpu 4G内存,512G硬盘 放在家里吃灰很久,最近几个月折腾折腾,装了linux操作系统,换了一个2T的硬盘 这里记录下折腾的过程,有需要的可以参考 开通公网IP 打电话给运营商一般都可…...
【Python学习笔记】调参工具Optuna + 泰坦尼克号案例
【Python学习笔记】调参工具Optuna&泰坦尼克号案例 背景前摇:(省流可不看) 最近找了份AI标注师的实习,但是全程都在做文本相关的活,本质上还是拧螺丝,就想着学点调参、部署什么的技能增加一些竞争力&a…...
GPT带我学-设计模式13-策略模式
概述 策略模式 例子 你可以创建一个策略工厂(Strategy Factory)来根据传入的 orgId 动态地选择合适的策略。以下是实现示例: 首先,定义策略接口和具体策略类: public interface CardPathStrategy {String generat…...
【Linux】Ubuntu配置JDK环境、MySQL环境
一、 Ubuntu配置JDK环境 在Ubuntu系统中安装JDK 8可以通过以下步骤进行: 打开终端。更新包列表: sudo apt update安装OpenJDK 8: sudo apt install openjdk-8-jdk验证安装是否成功: java -version注:如果系统中安…...
【ElasticSearch】ES 5.6.15 向量插件支持
参考 : https://github.com/lior-k/fast-elasticsearch-vector-scoring 下载插件 安装插件 插件目录: elasticsearch/plugins, 安装后的目录如下 plugins└── vector├── elasticsearch-binary-vector-scoring-5.6.9.jar└── plugin-descriptor.properties修…...
Kafka 高并发设计之数据压缩与批量消息处理
《Kafka 高性能架构设计 7 大秘诀》专栏第 6 章。 压缩,是一种用时间换空间的 trade-off 思想,用 CPU 的时间去换磁盘或者网络 I/O 传输量,用较小的 CPU 开销来换取更具性价比的磁盘占用和更少的网络 I/O 传输。 Kafka 是一个高吞吐量、可扩展…...
设计模式使用场景实现示例及优缺点(行为型模式——模板方法模式)
模板方法模式(Template Method Pattern) 模板方法模式(Template Method Pattern)是一种行为设计模式,它定义了一个操作中的算法的骨架,将算法的一些步骤延迟到子类中。这样可以在不改变算法的结构的前提下…...
ETL数据集成丨主流ETL工具(ETLCloud、DataX、Kettle)数据传输性能大PK
目前市面上的ETL工具众多,为了方便广大企业用户在选择ETL工具时有一个更直观性能方面的参考值,我们选取了目前市面上最流行的三款ETL工具(ETLCloud、DataX、Kettle)来作为本次性能传输的代表,虽然性能测试数据有很多相…...
eNSP:防火墙设置模拟公司配置(二)
实验拓扑: 实验要求(二): 7: 办公设备可以通过电信连接和移动上网(多对多NAT,并且需要保留一个公网IP) 8: 分公司通过公网移动电信,访问DMZ的http服务器 9&a…...
vue3 两个组件之间传值
Props 父组件可以通过 props 将数据传递给子组件。这是最常见的组件间通信方式 <!-- 父组件 --><template><ChildComponent :message"parentMessage" /></template><script>import ChildComponent from ./ChildComponent.vue;export…...
基于matlab的深度学习案例及基础知识专栏前言
专栏简介 内容涵盖深度学习基础知识、深度学习典型案例、深度学习工程文件、信号处理等相关内容,博客由基于matlab的深度学习案例、matlab基础知识、matlab图像基础知识和matlab信号处理基础知识四部分组成。 一、 基于matlab的深度学习案例 1.1、matlab:基于模…...
机器学习——L1 L2 范数 —>L1 L2正则化
1、L1范数和L2范数是机器学习和数据分析中经常使用的两种范数,它们之间存在多个方面的区别。 以下是关于L1范数和L2范数区别的详细解释: 一、定义差异 L1范数:也被称为曼哈顿范数,是向量元素的绝对值之和。对于一个n维向量x&am…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
利用ngx_stream_return_module构建简易 TCP/UDP 响应网关
一、模块概述 ngx_stream_return_module 提供了一个极简的指令: return <value>;在收到客户端连接后,立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量(如 $time_iso8601、$remote_addr 等)&a…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
(二)TensorRT-LLM | 模型导出(v0.20.0rc3)
0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述,后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作,其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
