admin管理员组文章数量:1639675
由于文件安全问题,要求上传文件的时候,把文件流加密后传递给后端,且下载的时候,解密后,方可下载文件。有两种方法、一种将文件转base64加密 一种是转二进制数据加密、由于base64会将原文件大小变大很多倍,二进制不会、因此推荐使用方法二。以下是相关代码:
方法一
1、引入crypto-js,并封装加密、解密的方法,具体代码如下:
// utils/jsencrypt.js
import CryptoJS from 'crypto-js';
// DES加密
export const encryptByDES = (message, key) => {
var keyHex = CryptoJS.enc.Utf8.parse(key);
var encrypted = CryptoJS.AES.encrypt(message, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.toString();
}
// DES解密
export const decryptByDES = (ciphertext, key) => {
var keyHex = CryptoJS.enc.Utf8.parse(key);
// direct decrypt ciphertext
var decrypted = CryptoJS.AES.decrypt({
ciphertext: CryptoJS.enc.Base64.parse(ciphertext)
}, keyHex, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
return decrypted.toString(CryptoJS.enc.Utf8);
}
2、文件上传时加密
页面:
<el-upload
action="#"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="1"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
:http-request="handleFileUpload"
class="upload-file-uploader"
ref="upload"
>
<!-- 上传按钮 -->
<el-button size="mini" type="primary" :loading="loading">选取文件</el-button>
<!-- 上传提示 -->
<div class="el-upload__tip" slot="tip" v-if="showTip">
请上传
<template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
的文件
</div>
</el-upload>
上传文件(加密文件):首先使用FileReader中readAsDataURL将上传的文件流转成base64字符串,然后使用加密事件将base64字符串加密,传递给后端。
// 上传文件
handleFileUpload(file){
this.loading = true
let reader = new FileReader()
reader.readAsDataURL(file.file) // 读取base64
reader.onload = ()=>{
// reader.result 读取base64
// 使用 AES 算法对 reader 进行加密
let encrypted = encryptByDES(reader.result, 'abcdefghijklmno12345678910234567') // 此加密key可自定义
this.base64String = encrypted
// 获取文件类型
this.fileTypes = file.file.name.substring(file.file.name.lastIndexOf("."))
let params = {
fileName:file.file.name,
fileType:this.fileTypes,
fileSize:file.file.size,
base64:this.base64String // 将加密后的文件字符串传给后端
}
getFileUpload(params).then((res)=>{
this.loading = false
this.$message.success("上传成功");
this.fileName=res.fileName
console.log(this.fileName,'this.fileName')
this.$emit("input", res.fileId);
this.$emit('fileName',this.fileName)
}).catch((error)=>{
this.loading = false
this.$message.error("上传失败, 请重试");
console.log(error,'error')
this.fileList = []
this.list = []
})
}
},
下载文件(解密文件):先将获取到的加密串解密,然后将base64串转成blob格式,然后下载文件,具体代码如下:
// 通过接口获取到加密字符串files
keyFiles(params).then((files)=>{
// 将加密字符串files解密
let base64Url = decryptByDES(files,'abcdefghijklmno12345678910234567')
// 将解密到的base64字符串转成blob格式
let blob = this.base64Toblob(base64Url)
// 下载文件
this.blobDownload(blob,this.listParams.fileName)
this.$set(row, 'loading', false)
})
base64Toblob(dataURI) {
// 将 dataURI 分割为类型和数据两部分
var parts = dataURI.split(",");
var type = parts[0].match(/:(.*?);/)[1];
var data = parts[1];
// 将 base64 数据解码为二进制数据
var byteString = atob(data);
// 将二进制数据转换为类型化数组
var arrayBuffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(arrayBuffer);
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
// 创建一个 Blob 对象
var blob = new Blob([intArray], { type: type });
return blob;
},
blobDownload(blob,fileName){
// 判断浏览器类型
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// 如果是 IE 浏览器,使用 msSaveOrOpenBlob 方法
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
var myUrl = URL.createObjectURL(blob); //创建图片的临时url
// downloadFile(myUrl,name)
var a = document.createElement("a") //新建一个a链接
a.setAttribute("href",myUrl) // a链接的url为图片的url
a.setAttribute("download",fileName)
a.setAttribute("target","_blank")
let clickEvent = document.createEvent("MouseEvents");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
}
},
由于要支持ie浏览器,注意crypto-js的版本,一开始使用4.1.1 不支持ie,后面改成4.0.0即可。
方法二、由于将文件转成base64加密后使文件大小比之前大了很多倍,存到服务器很不友好,于是使用二进制进行加解密、保持与之前大小一致,具体如下:
1、封装加密、解密的方法:
import CryptoJS from 'crypto-js';
import CryptoU8array from "./crypto-en"
var key = CryptoJS.enc.Utf8.parse("1111111111111111"); //十六位十六进制数作为秘钥
var iv = CryptoJS.enc.Utf8.parse('1111111111111111');//十六位十六进制数作为秘钥偏移量
// 使用 AES 进行文件加密
export function encryptFile(word) {
const messageWordArray = CryptoU8array.u8array.parse(word);
var encrypted = CryptoJS.AES.encrypt(messageWordArray, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
let encryptedBytes = encrypted.ciphertext
return CryptoU8array.u8array.stringify(encryptedBytes)
}
// 使用 AES 进行文件解密
export function decryptFile(word) {
const messageWordArray = CryptoU8array.u8array.parse(word);
var dcBase64String = messageWordArray.toString(CryptoJS.enc.Base64);
var decrypt = CryptoJS.AES.decrypt(dcBase64String, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
// var decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return CryptoU8array.u8array.stringify(decrypt)
}
// crypto-en.js
import CryptoJS from 'crypto-js'
CryptoJS.enc.u8array = {
/**
* Converts a word array to a Uint8Array.
*
* @param {WordArray} wordArray The word array.
*
* @return {Uint8Array} The Uint8Array.
*
* @static
*
* @example
*
* var u8arr = CryptoJS.enc.u8array.stringify(wordArray);
*/
stringify: function (wordArray) {
// Shortcuts
var words = wordArray.words
var sigBytes = wordArray.sigBytes
// Convert
var u8 = new Uint8Array(sigBytes)
for (var i = 0; i < sigBytes; i++) {
var byte = (words[i >>> 2] >>> (24 - (i % 4) * 8)) & 0xff
u8[i] = byte
}
return u8
},
/**
* Converts a Uint8Array to a word array.
*
* @param {string} u8Str The Uint8Array.
*
* @return {WordArray} The word array.
*
* @static
*
* @example
*
* var wordArray = CryptoJS.enc.u8array.parse(u8arr);
*/
parse: function (u8arr) {
// Shortcut
var len = u8arr.length
// Convert
var words = []
for (var i = 0; i < len; i++) {
words[i >>> 2] |= (u8arr[i] & 0xff) << (24 - (i % 4) * 8)
}
return CryptoJS.lib.WordArray.create(words, len)
}
}
export default {
u8array: CryptoJS.enc.u8array
}
2、文件上传时加密
// 上传文件
handleFileUpload(file) {
this.upload.isUploading = true
let reader = new FileReader()
reader.readAsArrayBuffer(file.file) // 以二进制数据读取文件
reader.onload = () => {
var fileContent = new Uint8Array(reader.result) // 转成Uint8Array类型
var encryptedContent = encryptFile(fileContent); // 加密
console.log(encryptedContent, '加密后串');
let blobType = file.file.type
let fileName = file.file.name
let blob = this.atobToblob(encryptedContent, blobType) // 将加密后串转blob
let blobToFile = new File([blob], fileName, {
type: blobType,
lastModified: Date.now()
}); // 得到加密文件
let formData = new FormData();
formData.append("file", blobToFile); // 传给后端即可
}
},
atobToblob(intArray,type) {
// 创建一个 Blob 对象
var blob = new Blob([intArray], { type: type });
return blob;
}
3、解密并下载
// 解密逻辑 file-二进制-解密-blob-file
desFileList() {
this.files.map((item) => {
let readers = new FileReader()
readers.readAsArrayBuffer(item.url) // item.url 为加密后的串
readers.onload = () => {
var fileContent = new Uint8Array(readers.result)
// console.log(fileContent, 'fileContent加密前');
var encryptedContent = decryptFile(fileContent);
console.log(encryptedContent, '解密后3333');
let blob = atobToblob(encryptedContent, item.url.type)
console.log(blob,'blob');
let blobToFile = new File([blob], item.url.name, {
type: item.url.type,
lastModified: Date.now()
})
item.url = blobToFile
item.name = item.url.name
item.tag=1
// blobDownload(blob,blobToFile.name)
}
})
console.log(this.files,'this.files');
setTimeout(() => {
this.$refs.files.setFileList(this.files)
}, 500);
},
export function blobDownload(blob, fileName) {
// 判断浏览器类型
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
// 如果是 IE 浏览器,使用 msSaveOrOpenBlob 方法
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
var myUrl = URL.createObjectURL(blob); //创建图片的临时url
// downloadFile(myUrl,name)
var a = document.createElement("a") //新建一个a链接
a.setAttribute("href", myUrl) // a链接的url为图片的url
a.setAttribute("download", fileName)
a.setAttribute("target", "_blank")
let clickEvent = document.createEvent("MouseEvents");
clickEvent.initEvent("click", true, true);
a.dispatchEvent(clickEvent);
}
}
版权声明:本文标题:使用crypto-js对文件上传下载进行加密处理 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1729293353a1194436.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论