文件上传前的压缩、加密；以及下载前的解压缩、解密

最新推荐文章于 2022-09-29 15:08:30 发布

qq_43561241

最新推荐文章于 2022-09-29 15:08:30 发布

阅读量594

点赞数

分类专栏：前端 js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43561241/article/details/121767845

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jszip/3.6.0/jszip.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script>
	</head>
	<body>
		<input id="input" type="file" name="file" accept=".pdf" onchange="afterRead()">
	</body>
	<script>
		function afterRead(){
			let file = document.getElementById('input').files[0];
			/*文件压缩 zip*/
			fileJSZip(file).then(function(content){
				/*zip转base64*/
				fileToBase64(content).then(function(fileZip){
					//aes加密
					let key = CreateAesKey();
					let iv = CreateAesIv();
					let fileARS = EncryptByAES(key,iv,fileZip)
					
					//aes解密
					let orginFile = DecryptByAES(key,iv,fileARS)
					
					//base64转zip
					let orginFileZip = base64ToBlob(orginFile)
					
					//解压缩
					let zip = new JSZip();
					zip.loadAsync(orginFileZip, {optimizedBinaryString: true}).then(resZip=>{
						for (let key in resZip.files) {
							let fileName = resZip.files[key].name
							// 用blob的格式读取，方便后面下载到本地
							let base = resZip.file(resZip.files[key].name).async('blob')
							base.then(res => {
								// 创建隐藏的可下载链接
								var eleLink = document.createElement('a');
								eleLink.download = fileName;
								eleLink.style.display = 'none';
								// 下载内容转变成blob地址
								let fileBolb = new Blob([res])
								console.log(fileBolb)
								eleLink.href = URL.createObjectURL(fileBolb);
								// 触发点击
								document.body.appendChild(eleLink);
								eleLink.click();
								// 然后移除
								document.body.removeChild(eleLink);
							})
						}
					})
					
					
				})
				
			});
			
		}
		
		/**
		 * 压缩文件
		 */
		function fileJSZip(file){
			return new Promise(function(resolve){
				var zip = new JSZip(); //生成一个压缩包对象
				zip.file(file.name, file);  //将上传的内容添加进压缩包内
				zip.generateAsync({
					type:"Blob",
					compression: "DEFLATE",
					compressionOptions: {
						level: 9 // 压缩等级1~9 1压缩速度最快，9最优压缩方式
					}
				}).then(function(content){
					var fileZip = new File([content],file.name+'.zip',{type: "application/zip"});
					return resolve(fileZip)
				});
			})
		}
		
		function fileToBlob(file) {
		    return new Promise((resolve, reject) => {
		        let reader = new FileReader()
		        reader.readAsArrayBuffer(file)
		        let blob = null
		        reader.onload = (e) => {
		            if (typeof e.target.result === 'object') {
		                blob = new Blob([e.target.result])
		            } else {
		                blob = e.target.result
		            }
		            resolve(blob)
		        }
		    })
		}
		
		/**
		 * 文件转base64
		 * @param file
		 */
		function fileToBase64(file) {
		    return new Promise(resolve => {
		        let reader = new FileReader()
		        reader.readAsDataURL(file)
		        reader.onload = function(e) {
		            resolve(e.target.result)
		        }
		    })
		}
		
		function base64ToBlob(base64) {
		    let arr = base64.split(',')
		    let contentType = arr[0].match(/:(.*?);/)[1]
		    let bstr = atob(arr[1])
		    let n = bstr.length
		    let u8arr = new Uint8Array(n)
		    while (n--) {
		        u8arr[n] = bstr.charCodeAt(n)
		    }
		    return new Blob([u8arr], { type: contentType })
		}
		
		/**
		 * 生成AES key
		 */
		function CreateAesKey() {
		  var wordArray = CryptoJS.lib.WordArray.random(16)
		  //默认字母小写，手动转大写
		  return wordArray.toString(CryptoJS.enc.Base64)
		}
		
		/**
		 * 生成AES IV
		 */
		 function CreateAesIv() {
			var wordArray = CryptoJS.lib.WordArray.random(16)
			//默认字母小写，手动转大写
			return wordArray.toString(CryptoJS.enc.Base64)
		}
		
		/**
		 * AES/CBC/PKCS5Padding 加密
		 */
		function EncryptByAES(key, iv, content) {
			key = CryptoJS.enc.Base64.parse(key)
			iv = CryptoJS.enc.Base64.parse(iv)
			let srcs = CryptoJS.enc.Utf8.parse(content);
			let encrypted = CryptoJS.AES.encrypt(srcs, key, {
				iv: iv,
				mode: CryptoJS.mode.CBC,
				padding: CryptoJS.pad.Pkcs7
		    })
		    return encrypted.toString()
		}
		
		/**
		 * AES/CBC/PKCS5Padding 解密
		 */
		function DecryptByAES(key, iv, content) {
		    key = CryptoJS.enc.Base64.parse(key)
		    iv = CryptoJS.enc.Base64.parse(iv)
		    let decrypt = CryptoJS.AES.decrypt(content, key, {
				iv: iv,
				mode: CryptoJS.mode.CBC,
				padding: CryptoJS.pad.Pkcs7
		    })
		    let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
		    return decryptedStr.toString()
		}
	</script>
</html>

qq_43561241

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
文件上传前的压缩、加密；以及下载前的解压缩、解密

上传前用JSZip将文件压缩为zip包，然后转base64，再用CryptoJS对数据进行AES加密处理；下载前用CryptoJS对数据进行解密得到base64，然后转zip包，再用JSZip对文件进行解压，将文件转成blob并用a标签下载
复制链接

扫一扫