最初,我使用 FileReader 在客户端将图像上传转换为 base64,然后加密。将该结果附加到表单字段然后提交,但这会占用太多时间,所以我正在寻找替代方案。
我正在尝试使用JSZip首先压缩然后加密,然后提交、检索、解密和显示图像,但我一直坚持如何做到这一点。我的压缩尝试看起来像这样。
$(document).on("change", "#chatImage", function() {
var rid = $(this).closest(".chat").data("id");
var tempSrc = $(this).val();
/* Make a zip file here */
var fi = $(this);
var fileInput = fi;
var files = [];
// get all selected file
$.each(fileInput.files, function(i, file) {
files.push(file);
});
//create a zip object
var zip = new JSZip();
//add all files to zip
function addFileToZip(n) {
if(n >= files.length) {
//here generate file to zip on client side
zip.generateAsync({type:"blob", compression:"default"}).then(function(content){
//generated zip content to file type
var files = new File([content], "default.zip");
console.log(files);
var eImgArray = {};
$.ajax({
url : ajax_object.ajax_url,
type : 'post',
data : {
action: 'get_room_member_keys',
rid : rid,
},
beforeSend: function() {},
success: function(html) {
var pubKeys = $.parseJSON(html);
$.each( pubKeys, function( key, value ) {
var imgEncrypt = cryptico.encrypt(files, value);
var imgSrc = imgEncrypt.cipher;
eImgArray[key] = imgSrc;
});
var strImgArray = JSON.stringify(eImgArray);
},
});
});
return;
}
var file = files[n];
var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function() {
arrayBuffer = this.result;
zip.file(file.name, arrayBuffer);
addFileToZip(n + 1);
}
fileReader.readAsArrayBuffer(file);
}
addFileToZip(0);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.2.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="jaj3dm" class="chat" />
<input id="chatImage" type="file" multiple="multiple" />
这在控制台中显示了一个加密的字符串和压缩的结果,但是当我解密并将结果记录到控制台时,我什么也得不到。执行此操作的正确方法是什么,或者更好的方法是什么?