使用crypto-js对文件上传下载进行加密处理

由于文件安全问题，要求上传文件的时候，把文件流加密后传递给后端，且下载的时候，解密后，方可下载文件。有两种方法、一种将文件转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);
  }
}