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

对文件加密并保存:

javascript 复制代码
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,则在前面填充0
	  while (hex.length < 32) {
	    hex = '0' + hex;
	  }
	  return hex;
	}

读取文件并解密:

javascript 复制代码
<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,则在前面填充0
    while (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;
  }
相关推荐
雪隐20 小时前
个人电脑玩AI-10让5060 Ti给你打工——我让 Claude Code 喝上了本地杂粮:Ternary-Bonsai-27B 部署历险记
前端·人工智能·后端
Bigger20 小时前
我受够了每天问“今天吃什么”,于是做了个 AI 菜单工具
前端·人工智能·agent
邢行行20 小时前
记一次 Three.js 踩坑:小球渲染出现诡异黑斑?原因竟然是这样...
前端
颜进强21 小时前
Claude Code -21 Agent 规划化编写范式
前端·后端
夕夕木各21 小时前
Ant Design 本地构建一直卡在 Bundling?一次 UtooPack 排查记录
前端·ant design
人间凡尔赛21 小时前
世界模型入门实战:从RTFM到理解物理世界 | 2026深度技术解析
javascript·人工智能·深度学习·机器学习
KaMeidebaby21 小时前
卡梅德生物技术快报|原核膜蛋白表达优化实操手册,膜蛋白的纯化梯度洗脱完整流程
前端·网络·数据库·人工智能·算法
大家的林语冰21 小时前
🫡 见证历史,TypeScript 7 重写成功,VS Code 原地起飞,GitHub 第一语言联手 Go 破而后立!
前端·javascript·typescript
wing981 天前
通往全干之路之:被迫成为全栈
前端·后端·程序员
MengMeng_10231 天前
soc平台告警分析思路及chrome插件
前端·chrome·安全威胁分析