文件上传下载显示进度(vue)

<template> ???<div v-show="circleProgress_wrapper_panel_statue" ?class="circleProgress_wrapper_panel"> ???????<div class="circleProgress_wrapper"> ???????????<div class="wrapper right"> ???????????????<div v-bind:style="{transform:‘rotate(‘+leftDeg + ‘deg)‘}" ?class="circleProgress rightcircle"></div> ???????????</div> ???????????<div class="wrapper left"> ???????????????<div v-bind:style="{transform:‘rotate(‘+rightDeg + ‘deg)‘}" ?class="circleProgress leftcircle"></div> ???????????</div> ????????</div> ????????<div class="backRect"> ????????????<img src="../img/back.png" /> ????????</div> ????</div></template><script>export default { ???data:function(){ ???????return { ???????????circleProgress_wrapper_panel_statue:false, ???????????leftDeg:0, ???????????rightDeg:0 ???????} ???}, ???methods:{ ???????//上传文件 ???loadFile:function (url, fileList,parm, suc) { ???????????????let len = fileList.length, ???????????????????????_this = this; ???????????????if(len == 0){ ???????????????????return; ???????????????} ???????this.showCircleProgressWrapperPanel(); ???????let formData = new FormData(); ???????????????for(let i = 0; i < len; i++){ ???????????????????formData.append("files"+i, fileList[i]); ???????????????} ???????????????for(let key in parm){ ???????????????????formData.append(key, parm[key]); ???????????????} ???????let xhr = new XMLHttpRequest(); ???????xhr.timeout = 15000; ???????//xhr.responseType = "json"; ???????xhr.open(‘POST‘, url, true); ???????xhr.onload = function (e) { ???????????if (this.status == 200 || this.status == 304) { ???????????????suc(this.responseText); ???????????} ???????}; ???????xhr.ontimeout = function (e) { alert("超时") }; ???????xhr.onerror = function (e) { alert("error:"+e) }; ???????xhr.upload.onprogress = function (e) { ???????????_this.updateCircleProgressWrapper(e.loaded, e.total); ???????}; ???????xhr.send(formData); ???}, ???????//显示文件 ???show:function (url, suc) { ???????????????let _this = this; ???????this.showCircleProgressWrapperPanel(); ???????let xhr = new XMLHttpRequest(); ???????xhr.open(‘GET‘, url); ???????xhr.responseType = "blob"; ???????xhr.onprogress = function (e) { ???????????_this.updateCircleProgressWrapper(e.loaded, e.total); ???????}; ???????xhr.onload = function () { ???????????if (this.status === 200) { ???????????????????????????????let blob = this.response; ???????????????????????????????suc(blob); ???????????} ???????} ???????xhr.send(); ???}, ???????test:function(){ ???????????this.showCircleProgressWrapperPanel(); ???????????let _this = this, ???????????????????i = 0, ???????????????????total = 10; ???????????window.interval = window.setInterval(function () { ???????????????_this.updateCircleProgressWrapper(i, total); ???????????????i = i + 1; ???????????????if(i > total){ ???????????????????window.clearInterval(window.interval); ???????????????} ???????????}, 100); ???????}, ???//根据上传字节数计算角度 ???updateCircleProgressWrapper:function (loaded, total) { ???????let deg = 360 * loaded / total; ???????this.updateCircleProgressRotate(deg); ???}, ???//隐藏滚动条 ???hideCircleProgressWrapperPanel:function () { ???????????????this.circleProgress_wrapper_panel_statue = false; ???????this.setCircleProgressRotate(45, 45); ???}, ???//显示滚动条 ???showCircleProgressWrapperPanel:function () { ???????this.circleProgress_wrapper_panel_statue = true; ???}, ???//更新滚动条角度 ???updateCircleProgressRotate:function (deg) { ???????let defaultDeg = deg; ???????if (deg <= 180) { ???????????deg = deg + 45; ???????????this.setCircleProgressRotate(deg, 45); ???????} else { ???????????(deg > 360) ? deg = 360 : ""; ???????????deg = deg - 180; ???????????deg = deg + 45; ???????????this.setCircleProgressRotate(225, deg); ???????} ???????if (defaultDeg == 360) { ???????????this.hideCircleProgressWrapperPanel(); ???????} ???}, ???//设置滚动条角度 ???setCircleProgressRotate:function(leftDeg, rightDeg) { ???????????????this.leftDeg = leftDeg; ???????????????this.rightDeg = rightDeg; ???} ???}, ???mounted:function(){ ???}}</script><style scoped> ???.circleProgress_wrapper_panel ???{ ???????????position:fixed; ???????????top:0; ???????????left:0; ???????????right:0; ???????????bottom:0; ???????????background-color:rgba(0,0,0,0.8); ???} ???.circleProgress_wrapper ???{ ???????????position:absolute; ???????????top:50%; ???????????left:50%; ???????????width: 100px; ???????????height: 100px; ???????????-webkit-transform: translate(-50%,-50%); ???????????transform: translate(-50%,-50%); ???} ???.wrapper{ ???????????width: 50px; ???????????height: 100px; ???????????position: absolute; ???????????top:0; ???????????overflow: hidden; ???} ???.right{ ???????????right:0; ???} ???.left{ ???????????left:0; ???} ???.circleProgress{ ???????????width: 80px; ???????????height: 80px; ???????????border:10px solid transparent; ???????????border-radius: 50%; ???????????position: absolute; ???????????top:0; ???????????-webkit-transform: rotate(45deg); ???????????transform: rotate(45deg); ???} ???.rightcircle{ ???????????border-top:10px solid #767676; ???????????border-right:10px solid #767676; ???????????right:0; ???????????-webkit-transform: rotate(45deg); ???????????transform: rotate(45deg); ???} ???.leftcircle{ ???????????border-bottom:10px solid #767676; ???????????border-left:10px solid #767676; ???????????left:0; ???????????-webkit-transform: rotate(45deg); ???????????transform: rotate(45deg); ???} ???.backRect ???{ ????????position:absolute; ????????top:50%; ????????left:50%; ????????width:79px; ????????height:79px; ????????border:10px solid #e5e5e5; ????????background-color:White; ????????border-radius: 50%; ????????-webkit-transform: translate(-50%,-50%); ????????transform: translate(-50%,-50%); ????????z-index:-1; ???} ???.backRect img ???{ ???????width:100%; ???????position:absolute; ???????top:50%; ???????left:50%; ????????-webkit-transform: translate(-50%,-50%); ????????transform: translate(-50%,-50%); ???}</style>

let fileData = [], ???????????????????????_this = this, ???????????????????????imgList = this.imgList, ???????????????????????len = this.imgList.length, ???????????????????????item = null; ???????????????for(let i = 0; i < len; i++){ ???????????????????item = imgList[i]; ???????????????????fileData.push(item.data);//将多个文件对应的file对象放入数组 ???????????????} ???????????????this.$refs.fileLoadingPonent.loadFile(Config.report,fileData,{content:this.reportContent},function(data){ ???????????????????let result = JSON.parse(data); ???????????????????if(result.res == "1"){ ???????????????????????_this.$store.commit(‘report/setReportContent‘,{value:""}) ???????????????????????_this.$store.commit(‘report/clearImgList‘,{}) ???????????????????????_this.clearIcon(); ???????????????????}else{ ???????????????????????alert(result.msg); ???????????????????} ???????????????});

loadBigImg:function(src,index,event){ ?????let _this = this; ?????let NSrc = src.replace("_s","");//缩略图和大图的区别是缩略图在大图的名字后面多了_s,如：大图:name.jpg,对应的缩略图:name_s.jpg ?????let NPath = Config.hostImg + NSrc;//大图的显示地址 ?????let target = event.currentTarget; ?????this.$refs.fileLoadingPonent.show(NPath,function(blob){ ???????let imgEle = document.createElement("img");//创建新图片控件 ???????let parentNode = target.parentNode; ???????parentNode.removeChild(parentNode.getElementsByTagName("img")[0]);//删除之前的缩略图 ???????imgEle.style.width = "100%"; ???????imgEle.onload = function (e) { ???????????window.URL.revokeObjectURL(imgEle.src); //释放。 ???????}; ???????imgEle.src = window.URL.createObjectURL(blob); ?//有问题，将blob加载到img中 由于blob太大 会有性能影响 应该怎么在加载之后 如何释放呢： ???????parentNode.appendChild(imgEle); ???????//_this.$store.commit(‘details/changeImgList‘,{value:NSrc,index:index}); ???????target.style.display = "none";//隐藏提示点击加载文字 ?????}); ???}