使用worker进行加解密，防止主线程卡死

src/func/AES.js

@@ -0,0 +1,13 @@
+import aesjs from 'aes-js'
+import aes_worker from '@/worker/aes_ctr?worker'
+
+export default (key, data) => {
+    key = aesjs.utils.utf8.toBytes(key)
+    return new Promise((resolve) => {
+        const aesWorker = new aes_worker()
+        aesWorker.onmessage = (event) => {
+            resolve(event.data)
+        }
+        aesWorker.postMessage({ data, key })
+    })
+}

src/func/SM4.js

@@ -0,0 +1,19 @@
+import sm4_worker from '@/worker/sm4?worker'
+
+export default async (key, data) => {
+    // console.log(key)
+    // key = aesjs.utils.utf8.toBytes(key)
+    const encryptedBytes = await new Promise((resolve) => {
+        const aesWorker = new sm4_worker()
+        aesWorker.onmessage = (event) => {
+            resolve(event.data)
+        }
+        aesWorker.postMessage({ data, key })
+    })
+    // var encryptedBytes = sm4.encrypt(data, key, {
+    //     padding: 'pkcs#7',
+    //     output: 'array'
+    // })
+    // console.log(encryptedBytes, sm4.decrypt(encryptedBytes, key,{output:'array'}))
+    return new Uint8Array(encryptedBytes)
+}

src/func/upload.js

@@ -1,95 +1,107 @@
-import aesjs from "aes-js";
+import aesjs from 'aes-js'
-import { Base64 } from "js-base64";
+import { Base64 } from 'js-base64'
 import { sm4 } from 'sm-crypto'
+import AES from './AES'
+import SM4 from './SM4'
 
 // const setting = useSettingStore();
 // const message = useMessage();
 
 // 生成密钥
-const generateKey = function(setting) {
+const generateKey = function (setting) {
-    if(setting.activeFuction === "不加密"){
+    if (setting.activeFuction === '不加密') {
         return ''
     }
-    var charMap = ""
+    var charMap = ''
-    for(let i of setting.activeKeyMap){
+    for (let i of setting.activeKeyMap) {
-        if(i === 'A-Z'){
+        if (i === 'A-Z') {
             charMap = charMap + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
-        }else if(i === "a-z"){
+        } else if (i === 'a-z') {
             charMap = charMap + 'abcdefghijklmnopqrstuvwxyz'
-        }else if(i === '0-9'){
+        } else if (i === '0-9') {
             charMap = charMap + '0123456789'
         }
     }
-    var returnStr = "",
+    var returnStr = '',
-        length = setting.activeFuction !== "AES256" ? 16 : 32
+        length = setting.activeFuction !== 'AES256' ? 16 : 32
     // charMap = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
 
     for (var i = 0; i < length; i++) {
-        var index = parseInt(Math.random() * charMap.length);
+        var index = parseInt(Math.random() * charMap.length)
-        returnStr += charMap.substring(index, index + 1);
+        returnStr += charMap.substring(index, index + 1)
     }
-    if(setting.activeFuction === "SM4"){
+    if (setting.activeFuction === 'SM4') {
         returnStr = 'SM4' + returnStr
     }
     // console.log(returnStr,returnStr.length)
-    return returnStr;
+    return returnStr
-};
+}
-const blob2Uint8Array = function(blob) {
+const blob2Uint8Array = function (blob) {
     return new Promise((resolve, reject) => {
-        let reader = new FileReader();
+        let reader = new FileReader()
-        reader.readAsArrayBuffer(blob);
+        reader.readAsArrayBuffer(blob)
-        reader.onload = function() {
+        reader.onload = function () {
-            let buffer = reader.result;
+            let buffer = reader.result
-            let uint8array = new Uint8Array(buffer);
+            let uint8array = new Uint8Array(buffer)
-            resolve(uint8array);
+            resolve(uint8array)
-        };
+        }
-        reader.onerror = function() {
+        reader.onerror = function () {
-            reject(reader.error);
+            reject(reader.error)
-        };
+        }
-    });
+    })
-};
-
-
-const AES = (key,data)=>{
-    key = aesjs.utils.utf8.toBytes(key);
-    var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
-    var encryptedBytes = aesCtr.encrypt(data);
-    return encryptedBytes;
-}
-const SM4 = (key,data)=>{
-    // console.log(key)
-    var encryptedBytes = sm4.encrypt(data,key,{padding: 'pkcs#7',output:'array'});
-    // console.log(encryptedBytes, sm4.decrypt(encryptedBytes, key,{output:'array'}))
-    return new Uint8Array(encryptedBytes);
 }
+
+// const AES = (key, data) => {
+//     key = aesjs.utils.utf8.toBytes(key)
+//     // var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5))
+//     // var encryptedBytes = aesCtr.encrypt(data)
+//     // return encryptedBytes
+//     return new Promise((resolve) => {
+//         const aesWorker = new aes_worker()
+//         aesWorker.onmessage = (event) => {
+//             resolve(event.data)
+//         }
+//         aesWorker.postMessage({ data, key })
+//     })
+// }
+// const SM4 = (key, data) => {
+//     // console.log(key)
+//     var encryptedBytes = sm4.encrypt(data, key, {
+//         padding: 'pkcs#7',
+//         output: 'array'
+//     })
+//     // console.log(encryptedBytes, sm4.decrypt(encryptedBytes, key,{output:'array'}))
+//     return new Uint8Array(encryptedBytes)
+// }
 const encrypt = (key, data, fileName, setting, message) => {
     // if(!encryptFunction){
     //     encryptFunction = setting.activeFuction
     // }
-    let encryptFunction = {0:'不加密',16:'AES128',19:'SM4',32:'AES256'}[key.length]
+    let encryptFunction = {
-    return blob2Uint8Array(data).then(data => {
+        0: '不加密',
+        16: 'AES128',
+        19: 'SM4',
+        32: 'AES256'
+    }[key.length]
+    return blob2Uint8Array(data).then(async (data) => {
         let encrypted_data = null
-        if(encryptFunction === "不加密"|| key === ''){
+        if (encryptFunction === '不加密' || key === '') {
             encrypted_data = data
             // AES
-        }else if(encryptFunction != "SM4"){
+        } else if (encryptFunction != 'SM4') {
-            if(message)
+            if (message) message.info(`开始加密${fileName}`)
-                message.info(`开始加密${fileName}`);
+            encrypted_data = await AES(key, data)
-            encrypted_data = AES(key,data)
+            if (message) message.info(`${fileName}加密完成`)
-            if(message)
-                message.info(`${fileName}加密完成`);
             // SM4
-        }else{
+        } else {
-            if(message)
+            if (message) message.info(`开始加密${fileName}`)
-                message.info(`开始加密${fileName}`);
+            key = [...aesjs.utils.utf8.toBytes(key.substring(3))]
-            key = [...aesjs.utils.utf8.toBytes(key.substring(3))];
+            encrypted_data = await SM4(key, data)
-            encrypted_data = SM4(key,data)
+            if (message) message.info(`${fileName}加密完成`)
-            if(message)
-                message.info(`${fileName}加密完成`);
         }
         return encrypted_data
-    });
+    })
-};
+}
 
 // setting为pinia存储的setting。。。
 const encryptString = (key, str, setting) => {
@@ -97,24 +109,29 @@ const encryptString = (key, str, setting) => {
     //     encryptFunction = setting.activeFuction
     // }
     // console.log(key,key.length)
-    let encryptFunction = {0:'不加密',16:'AES128',19:'SM4',32:'AES256'}[key.length]
+    let encryptFunction = {
-    if(encryptFunction === "不加密" || key === ''){
+        0: '不加密',
+        16: 'AES128',
+        19: 'SM4',
+        32: 'AES256'
+    }[key.length]
+    if (encryptFunction === '不加密' || key === '') {
         // return sm4.encrypt(str, 'miaospringmiaospringmiaospringao')
         return Base64.encode(str)
-    }else if(encryptFunction !== "SM4"){
+    } else if (encryptFunction !== 'SM4') {
-        key = aesjs.utils.utf8.toBytes(key);
+        key = aesjs.utils.utf8.toBytes(key)
         // var data = aesjs.utils.utf8.toBytes(str);
         var data = new TextEncoder().encode(str)
-        var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5));
+        var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(5))
-        var encryptedBytes = aesCtr.encrypt(data);
+        var encryptedBytes = aesCtr.encrypt(data)
-        var res = Base64.fromUint8Array(encryptedBytes,true);
+        var res = Base64.fromUint8Array(encryptedBytes, true)
         // console.log(encryptedBytes,res)
-        return res;
+        return res
-    }else{
+    } else {
-        key = [...aesjs.utils.utf8.toBytes(key.substring(3))];
+        key = [...aesjs.utils.utf8.toBytes(key.substring(3))]
         // console.log(key)
         return sm4.encrypt(str, key)
     }
-};
+}
 
-export {encrypt,encryptString,generateKey}
+export { encrypt, encryptString, generateKey }

src/worker/aes_ctr.js

@@ -0,0 +1,9 @@
+import aesjs from 'aes-js'
+
+self.onmessage = async function (event) {
+    const data = event.data.data
+    const key = event.data.key
+    var aesCtr = new aesjs.ModeOfOperation.ctr(key, new aesjs.Counter(0))
+    const encryptData = aesCtr.encrypt(data)
+    self.postMessage(encryptData)
+}

src/worker/sm4.js

@@ -0,0 +1,11 @@
+import { sm4 } from 'sm-crypto'
+
+self.onmessage = async function (event) {
+    const data = event.data.data
+    const key = event.data.key
+    const encryptData = sm4.encrypt(data, key, {
+        padding: 'pkcs#7',
+        output: 'array'
+    })
+    self.postMessage(encryptData)
+}