javascript - 是否可以动态编码/解码上传的文件？

Question

最近我在考虑构建一个小型的安全服务，让用户上传文件并使用接收方的公钥对该文件进行编码。关键是我想即时执行此操作，因此上传前无需编码，而是作为其中的一部分。我开始在网上搜索，但找不到任何直接的答案。这可能吗？

Answer 1

您必须在上传文件之前执行加密。

我提供了一个客户端加密/解密的简单示例(使用凯撒加密)。

本质上，它使用 FileReader API 将文件的内容转换为 ArrayBuffer。使用类型化数组(在本例中为 Uint8Array)，您可以修改原始 ArrayBuffer 的每个字节，并执行加密。

加密完成后，您就可以继续发送数据了。

let input     = document.getElementById('input');
let img       = document.getElementById('myImg');
let caesarKey = document.getElementById('caesarKey');
let log       = document.getElementById('log');
document.getElementById('encrypt').addEventListener('click',encrypt);
document.getElementById('decrypt').addEventListener('click',decrypt);

// variables to store the image data, a d the encrypted image data
let imgData;
let encryptedData;


// prepare the file reader, and the onload callback
let reader = new FileReader();
reader.onload = e=>{ 
  log.innerHTML='Image ready! Press encrypt button...'
  imgData = reader.result;
}

// declare the file input onchangen handler
input.addEventListener('change', e=> { 
  log.innerHTML='...processing image'
  reader.readAsArrayBuffer(e.target.files[0]);
});

// caesar encrypt function
function encrypt(){
    log.innerHTML='Encrypting...'

    let key = Number( caesarKey.value )
    encryptedData = new Uint8Array(imgData);
    for(let i=0;i<encryptedData.byteLength;i++){
      encryptedData[i] = encryptedData[i]+key;
    }
  
    log.innerHTML='Image encrypted! Press decrypt...'
}

// caesar decrypt function, and image output
function decrypt(){
    log.innerHTML='Decrypting...'

    let key = Number( caesarKey.value );
  
    for(let i=0;i<encryptedData.byteLength;i++){
      encryptedData[i] = encryptedData[i]-key;
    }
  
    // output the image
    var blob = new Blob( [ encryptedData ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );
    img.src = imageUrl;
    
    log.innerHTML='Image decrypted! '

  
}

#log{
  padding:5px;
  text-align:center;
  background-color:blue;
  color:white;
  margin:5px;
}

<div id="log">--Select a jpg Image--</div>

<input type="file" accept=".jpg" id="input"><br>

Caesar Shift value:
<input type="text" id="caesarKey" value="5"><br>
<input type="button" value="Caesar Encrypt" id="encrypt">
<input type="button" value="Caesar Decrypt"  id="decrypt">
<img id="myImg">