最新新搭了一個控制檯，是基於阿里antd框架搭建的，總體上來講，antd從UI交互和組件的api上來看，還都是很好的框架了，不過還是踩了不少坑的，哈哈，後面慢慢整理出來。
這裏碰到的情況是，有個上傳大文件的需求，需要在前端展示出上傳的進度，剛接到需求的時候，我想到的方法是，由server端動態返回上傳進度的百分比，前端一直不停的調用這個接口就行了，後來百度了下，發現前端自己就可以實現這個需求，是通過原生XMLHttpRequest實現的，整理了下核心代碼
//通過前端原生XMLHttpRequest動態獲取上傳文件進度
doTransferFile = (file) => {
let mySelf = this;
let formData = new FormData();
let url = "http://xxx:444/upload_file.php";
let file = document.getElementById("chooseFile").files[0];
console.log(file)
formData.append("file",file);
// console.log(modal);
// console.log(formData);
// return false;
/* eslint-disable */
$.ajax({
url : url,
type : 'POST',
enctype: 'multipart/form-data',
data : formData,
// 告訴jQuery不要去處理髮送的數據
processData : false,
// 告訴jQuery不要去設置Content-Type請求頭
contentType : false,
timeout : 60000,//設置超時時間
beforeSend:function(){
console.log("現在開始上傳文件！");
notification['info']({
message: '提示',
description: '現在開始上傳文件！',
});
},
xhr: function(){
let myXhr = $.ajaxSettings.xhr();
// console.log(myXhr)
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e) {
if (e.lengthComputable) {
let percent = Math.floor((e.loaded/e.total)*100);
// console.log(e.loaded)
// console.log(e.total)
console.log(percent)
let upload = mySelf.state.upload;
upload.progress.loaded = e.loaded;
upload.progress.total = e.total;
upload.progress.percentage = percent;
mySelf.state.upload = upload;
// console.log(info);
mySelf.setState({
upload: upload
});
}
},false);
myXhr.upload.addEventListener('load',function(e) {
console.log('fish')
},false);
}
return myXhr;
},
success : function(res) {
console.log(res)
},
error : function(res) {
}
});
};
