最新新搭了一个控制台，是基于阿里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) { } });};
在antd框架下，调用的Progress组件动态展示的上传文件进度，效果图如下，待全部上传成功后，由接口返回上传文件的大小，路径等信息，render到页面上
