binxinxuelian
binxinxuelian
采纳率0%
2017-11-26 04:14 阅读 3.6k

多文件上传问题---前端开发

我用vue做了一个文件上传的页面,可以上传多个文件。但是有个问题,
如果上传多个文件时,只能第一个上传成功。其他的就不能上传了。找不到原因,
求大神指教。代码:




上传







  • {{item}}










export default { data(){ return { files:"", patchNames: [], patchFiles:[], patchFileInfos: [], delList:[], selectList:[], //选择的补丁列表 FTPS:[], countNum:0, patchlen:0, } //初始化data }, components:{ "LayoutDetailPage":LayoutDetailPage, }, mounted(){ }, methods: { loadPatchFile:function(){ var that=this; this.files = this.$refs.fileSelect.files; console.log("files的长度"+this.files.length); console.log("this.files"+this.files); var str = ''; var that=this; for(let i=0;i<this.files.length;i++){ let file=that.files[i]; that. patchNames.push(file.name); that.patchFiles.push(file); } }, upload:function(){ var that=this; console.log("文件名称:"+this.patchNames); console.log("上传服务器的files--"+this.patchFiles+"长度为:"+this.patchFiles.length); for(var i=0;i<this.patchFiles.length;i++){ var file=that.patchFiles[i]; that.changeBase64(file); } }, delPatch:function(){ console.log("排序前:"+this.delList); this.delList=this.delList.sort(); this.selectList=this.delList; console.log("排序前:"+this.delList); var that=this; if(this.delList.length>0){ var list=that.delList; console.log(this.delList); for(let i=list.length-1;i>=0;i--){ that.patchNames.splice(list[i],1); that.patchFiles.splice(list[i],1); $("#"+list[i]).css("background-color","#FBFBFB"); } this.delList=[]; }else{ bootbox.alert("请先选择补丁"); } }, changeBase64:function(file){ var that=this; var postData={}; if (window.File && window.FileReader && window.FileList && window.Blob) { let reader = new FileReader(); reader.onloadend = function () { // that.patchInfo = reader.result; postData.FTPS=window.FTPS; postData.PatchFileName=file.name; postData.PatchFileInfo=reader.result; teldCommon.CallServiceGateWayAsync("PatchInstall-UploadPatch", function (ret) { if (ret.state == "1") { debugger that.changeState(file.name,ret.state); } else { // NotifyError(ret.errmsg); that.changeState(file.name,ret.state); } }, {filter: JSON.stringify(postData)},true,true); }; reader.readAsDataURL(file); } }, getIndex:function(index){ var indexs=[]; $("#"+index).css("background-color","#eee"); this.delList.push(index); }, changeState:function(fileName,state){ var that=this; console.log("返回为true的文件名:"+fileName); bootbox.setDefaults("locale", "zh_CN"); for(let i=0;i<this.patchNames.length;i++){ if(that.patchNames[i]==fileName){ $("#"+i).find("i").remove(); if(state=="1"){ $("#"+i).append("<i class='fa fa-check-circle icon'></i>"); that.countNum++; that.patchlen++; if(that.patchlen==that.patchNames.length){ if(that.countNum==that.patchNames.length){ bootbox.alert("上传完成!"); }else{ bootbox.alert("未全部上传!"); } } }else{ $("#"+i).append("<i class='fa fa-exclamation-circle icon1'></i><a style='margin-left: 10px; font-size: 12px;' href='javascript:void(0)'>上传</a>"); $("#"+i).find("a").on("click",function(){ $("#"+list[i]).css("background-color","#FBFBFB"); console.log(i); that.changeBase64(that.files[i]); }); } } } }, } }
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

1条回答 默认 最新

相关推荐