vue 预览zip
ZIP的数据从接口传递数据流过来。解析数据流,并将zip的目录绑定到tree中。
·
ZIP的数据从接口传递数据流过来。解析数据流,并将zip的目录绑定到tree中。
1.引入插件jszip:
yarn add jszip
2.在需要引用的页面引用:
import JSZip from 'jszip'
3. 实现代码
api(option).then((res)=>{ // 接口获取zip的数据流
let jszip = new JSZip()
jszip.loadAsync(res.data).then(zip=>{
let myData=[]
that.transformData(zip, myData,0,)
that.treeData=myData // 将数据绑定到tree
that.$nextTick(()=>{
that.expandedKeys=['0']
})
})
});
transformData(obj, myData, level = 0,) {
let id=0
if(Object.keys(obj.files).length==0){
let fname=this.fileName.substring(0, this.fileName.lastIndexOf("."))
let rootData={id:'0',parentId:'', key:'0',title:fname, children:[]}
myData.push(rootData)
}else{
for (let key in obj.files) {
let array=key.split('/').filter(item => item != '')
if(array.length == level+1){
if (obj.files[key].dir) {
if(level==0){
let rootData={parentId:'', key:'0',title:array[level], children:[]}
myData.push(rootData)
this.transformData(obj, rootData,level+1)
}else{
if(key.indexOf(myData.fullName)===0 && key!= myData.fullName){
let newData={ key:myData.id+'-'+id,parentId:myData.id, title:array[level],children:[],fullName:key}
myData.children.push(newData)
id++
this.transformData(obj, newData,level+1)
}
}
}else{ // 文件
if(key.indexOf(myData.fullName)==0 && key!=myData.fullName){
let data= {parentId:myData.id, key:myData.id+'-'+id,title:array[level],}
myData.children.push(data)
id++
}
}
}
}
}
return myData;
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐

所有评论(0)