zip的数据流从后端接口获取为blob形式,使用插件jszip, 提取出zip中的目录并绑定到a-tree中。
同时根据压缩包中文件的类型来修改tree中的icon,并修改样式使显示更加清晰。
- 添加jszip插件:
yarn add jszip
(我一般都使用yarn添加,添加的时候很稳定快速,很少出问题)
- 由于我的项目中只是某个页面使用到该功能,所以使用局部引用:
在使用该功能的页面引入:
import JSZip from 'jszip'
- 页面设计,我使用了a-tree来展示,主要用到了treeData数据:
格式如下:
const treeData = [
{
title: "root",
key: "",
scopedSlots: { icon: "folder" },
children: [
{
title: "folder1",
key: "0-1",
id:"0-1",
parentId:"",
scopedSlots: { icon: "folder" },
children: [
{ title: "1.txt", key: "0-1-1", parentId:"0-1",scopedSlots: { icon: "txt" } },
{ title: "3.png", key: "0-1-2", parentId:"0-1",scopedSlots: { icon: "png" } },
{ title: "2.xml", key: "0-1-3", parentId:"0-1", scopedSlots: { icon: "xml" } },
],
},
{
title: "folder2",
key: "0-2",
id:"0-2",
parentId:"",
scopedSlots: { icon: "folder" },
children: [
{ title: "7.xlsx", key: "0-2-1", parentId:"0-2",scopedSlots: { icon: "childEdit" } },
],
},
{
title: "6.pdf",
key: "0-3",
id:"0-3",
parentId:"",
scopedSlots: { icon: "pdf" },
},
],
},
];
a--tree的html如下:
<a-tree
showIcon
:default-expanded-keys="expandedKeys"
:expandedKeys="expandedKeys"
:selectedKeys="selectedKeys"
:treeData="treeData"
@expand="onExpand"
@select="onSelect"
>
<a-icon slot="folder" class="folder" type="folder" />
<a-icon slot="image" class="image" type="file-image" />
<a-icon slot="audio" class="audio" type="audio" />
<a-icon slot="video" class="video" type="video-camera" />
<a-icon slot="docx" class="docx" type="file-word" />
<a-icon slot="xml" class="xml" type="file-excel" />
<a-icon slot="pdf" class="pdf" type="file-pdf" />
<a-icon slot="zip" class="zip" type="file-zip" />
<a-icon slot="txt" class="txt" type="file-text" />
</a-tree>
其中样式如下,可以自己任意修改:
#ziptree .anticon{
font-size: 20px; color: #08c
}
#ziptree .anticon.folder{
color: #e7c146
}
#ziptree .anticon.docx{
color: #2a0ae2
}
#ziptree .anticon.pdf{
color: #e90b1e
}
#ziptree .anticon.xml{
color: #047449
}
#ziptree .anticon.zip{
color: #435892
}
#ziptree .anticon.txt{
color: #b9c6e7
}
#ziptree .anticon.image{
color: #82c0a8
}
-
通过接口获取数据并处理数据:
downloadAttachmentStream(option).then((res)=>{
if (!res && res.status!=200 && res.data.type == "application/json") {
this.$message.error('找不到该文件')
return
}let jszip = new JSZip() jszip.loadAsync(res.data).then(zip=>{ let myData=[] that.transformData(zip, myData,0,) that.treeData=myData that.$nextTick(()=>{ that.expandedKeys=['0'] }) }) });
其中transformData方法如下:
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, fullName:fname+'/' ,type:'dir', children:[],slots:{ icon: "folder" }}
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={id:'0',parentId:'', key:'0',title:array[level], fullName:key ,type:'dir', children:[],slots:{ icon: "folder" }}
myData.push(rootData)
this.transformData(obj, rootData,level+1)
}else{
// 非根目录
if(key.indexOf(myData.fullName)===0 && key!= myData.fullName && array.length == level+1){
let newData={id:myData.id+'-'+id, key:myData.id+'-'+id,parentId:myData.id, title:array[level], type:'dir', children:[],fullName:key,slots:{ icon: "folder" }}
myData.children.push(newData)
id++
this.transformData(obj, newData,level+1)
}
}
}else{ // 文件
if(key.indexOf(myData.fullName)==0 && key!=myData.fullName){
let data= {id:myData.id+'-'+id,parentId:myData.id, key:myData.id+'-'+id,title:array[level], type:array[level].replace(/.+\./, ""),fullName:key,}
if(['jpg','png','gif'].includes(data.type)){
data.slots={icon: "image"}
}else if(data.type=='mp3'){
data.slots={icon: 'audio'}
}else if(data.type=='mp4'){
data.slots={icon: 'video'}
} else if(data.type=='xlsx'){
data.slots={icon: 'xml'}
} else{
data.slots={icon: data.type}
}
myData.children.push(data)
id++
}
}
}else{
//
}
}
}
return myData;
},
经过以上步骤就能实现一个很漂亮的压缩包的目录树了。