按照lrh3321提供的辦法改造了JSZip的壓縮的執行過程，單獨抽出來這個功能是沒有任何問題的，但是在與表單融合的時候，就出現了莫名其妙的bug。代碼如下：
$('#confirmBtn').on('click', async function() {
// 擷取到obj等模型檔案，并壓縮
// var formData = new FormData();
// 擷取checkbox
let zip = new JSZip();
var fileBox = $('#fileUploadInput');
var fileList = fileBox[0].files;
var objName = 'example';
// var flag = false;
for (const fileObject of fileList) {
// 擷取obj檔案的檔案名
if (fileObject.name.indexOf('.obj') !== -1) {
var num = fileObject.name.indexOf('.obj');
objName = fileObject.name.substring(0, num);
}
zip = await zipFileAsync(zip, fileObject);
}
sendFileAsync(zip, objName);
// 關閉目前彈窗，彈出進度條
$('#uploadModalTwo').modal('close');// 關閉目前model
$('#uploadModalThree').modal(modalOptionsTwo).modal('open');
console.log(zip);
// progressBar('Model/UploadModel', formData);
return false;
});
function zipFileAsync(zip, file) {
const promise = new Promise((resolve) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(e) {
var result = reader.result;
// 如果是圖檔檔案，需要儲存的時候把base64轉為Blob二進制格式
if (file.name.indexOf('.jpg' | '.png' | '.jpeg') !== -1) {
result = convertBase64UrlToBlob(result);
}
console.log(zip);
console.log(file.name);
resolve(
zip.file(file.name, result, {
type: 'blob',
}));
};
});
return promise;
}
function sendFileAsync(zip, objName) {
zip.generateAsync({
type: 'blob',
compression: 'DEFLATE', // force a compression for this file
compressionOptions: { // 使用壓縮等級，1-9級，1級壓縮比最低，9級壓縮比最高
level: 6,
},
}).then(function(content) {
// see FileSaver.js
console.log(content);
var formData = new FormData();
// JavaScript file-like 對象
formData.append('Blobfile', content);
console.log(formData);
console.log(formData.get('Blobfile'));
components.jszipSend('Model/UploadModel', formData);
return false;
});
}
function convertBase64UrlToBlob(urlData) {
var bytes = window.atob(urlData.split(',')[1]);
// 處理異常,将ascii碼小于0的轉換為大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type: 'image/jpg'});
}
// ajax發送資料到背景
jszipSend: function(url, data) {
url = url.indexOf('http') > -1 ? url : config.API_ROOT + url;
var xhr = new XMLHttpRequest();
xhr.open('POST', url);// 設定上傳方式以及處理請求位址
console.log('=====begin:======');
xhr.send(data);
console.log('=====send=====');
return false;
}
在執行過程中，可以下面的斷點：
可以執行到如下步驟：但是調用棧中卻沒有前面的異步方法
再繼續下去，就直接表單送出了。。。而且是送出到目前表單，背景接不到資料，為什麼呢