温馨连接提示:vue中级之路篇系列教程:
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(一)
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(二)
VUE系列—VUE+indexDB+JSZip+在线预览zip压缩文件(三)
注:请看完前两篇再来,不然你看不懂
通过前两篇文章我们的项目已经做出来了文件预览的初始效果,不知道你们看了以后会有什么想法,这篇文章开始着重讲解文件系统的构建。
####前言
前面我们已经得到文件树对象了,现在我们所要做的就是页面的功能实现,我们读取并在indexDB数据库里存储了文件信息,为了解决直接渲染文件信息到页面上,浏览器崩溃的问题,我们没有直接进行读取,而是采用创建目录,进去了以后在打开某一个具体的文件时,读取这个具体文件这一个单独的文件时,这样读取的息量少,所以不会崩溃。
但是有个问题,我们怎么去取这个文件信息,或者说我们怎么在indexDB数据库里准确找到这个文件信息?因为indexDB的特殊性我们不能去遍历它,不是不能遍历而是因为他的遍历机制太耗时间,每次打开一个文件遍历一次这样不妥,所以我们需要在给indexDB数据库添加文件信息时,记录文件信息对应它的存储索引。
##文件预览初始
起初,我想的是建一个数组,zip.forEach每执行一次,就往里面添加一个路径信息(即:01借款人申请表资料/实例/申请表与工作证0.jpg
),再通过他在数组中的位置来对应记录其在indexDB数据库中的索引,通过indexDB的objectStore.get()
直接就可以得到相应信息。但是我们的zip.forEach里面有好几个异步函数,没有人知道它具体何时能执行完,于是,就继续使用对象的方式记录。记录完后,我们需要渲染页面了,对于不同的文件,做成不同的样子,同时,为了优化,我们不能退出了数据库还在,所以在返回时数据库会被删除。
于是,我们把/page/property/upload_review.vue
文件最终的代码附上:
“`js
<a :download="this.curfile_infor.file_name" :href="requestfileinfor" @click="downloadExcel(curfile_infor.file_content)">
<el-button type="primary" size="mini">下载表格</el-button>
</a>
由于我们使用base64编码方式存储的二进制信息,所以得把二进制信息转换为文件信息:
downloadExcel (filecontent) {
this.requestfileinfor = 'data:application/vnd.ms-excel;base64,' + filecontent
}
data:application/vnd.ms-excel;base64,
是一种二进制变为文件的方式。
我们需要返回到上一级目录,所以我们保存的当前目录的分支及层级就拍上用场:
gotoBack () {
window.localStorage.curFileBranchHierarchy-- // 减层级
var curFileBranchPath = window.localStorage.curFileBranchPath
var fileObj = JSON.parse(window.localStorage.file_obj)
if (curFileBranchPath.indexOf('/') !== -1) { // 判断有无/,如果无则是最顶级,清空所有与目录相关的
var pathArray = curFileBranchPath.split('/') // 减当前目录路径
var curFilePath = ''
var curFileObjBranch = {} // 获取当前文件父级对象分支
for (var i = 0; i < pathArray.slice(0, pathArray.length - 1).length; i++) {
if (curFilePath === '') {
curFilePath = pathArray.slice(0, pathArray.length - 1)[i]
} else {
curFilePath = curFilePath + '/' + pathArray.slice(0, pathArray.length - 1)[i]
}
if (!this.$task.judgeIsNullObj(curFileObjBranch)) { // 初始时直接file_obj赋值
curFileObjBranch = fileObj[pathArray.slice(