×

VUE系列---VUE+indexDB+JSZip+在线预览zip压缩文件(三)

96
言墨儿
2017.02.28 09:19* 字数 1548

推荐我的vue教程:VUE系列教程目录

温馨连接提示: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文件最终的代码附上:

<template>
 <div>
   <!-- top -->
   <section class="admin_tool">
     <div class="admin_tool_btn">
       <el-button size="small" @click="gotoBack">
         <i class="fa-chevron-left"></i>
         <span>返回</span>
       </el-button>
     </div>
     <div class="admin_location">
       <el-breadcrumb>
         <el-breadcrumb-item>zip在线预览</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
   </section>
   <section v-if="nonsupport_indexdb">您的浏览器不支持在线预览,请您下载预览</section>
   <section class="file_review" v-else>
     <h3>文件预览</h3>
     <ul class="file_review_list">
       <li v-for="(valuename, keys, index) in file_obj" @click="selectedFile($event)" @dblclick="openfile(valuename, keys)" :title="keys">
         <template v-if="fileTypeNameJudge(keys).file_type === 'photo' && fileTypeNameJudge(keys).file_status === 0">
           <i class="icon_photo"></i>
           <span v-text="keys"></span>
         </template>
         <template v-if="fileTypeNameJudge(keys).file_type === 'excel' && fileTypeNameJudge(keys).file_status === 0">
           <i class="icon_excel"></i>
           <span v-text="keys"></span>
         </template>
         <template v-if="fileTypeNameJudge(keys).error_name === '无法识别此文件' && fileTypeNameJudge(keys).file_status === 0">
           <i class="icon_errorfile"></i>
           <span v-text="keys"></span>
         </template>
         <template v-if="fileTypeNameJudge(keys).file_type === 'dir' && fileTypeNameJudge(keys).file_status === 1">
           <i class="icon_finder"></i>
           <span v-text="keys"></span>
         </template>
       </li>
     </ul>
   </section>
 </div>
</template>
<script>
import JSZip from 'jszip'
export default {
 data () {
   return {
     upload_review_file_name: [], // 文件名存放
     zipfile_index: {},
     file_obj: {},
     nonsupport_indexdb: false,
     imgUrlArr: null
   }
 },
 created () {
   window.onunload = function () { // 关闭页面时设定判断关闭加载为true,同时删除数据库
     window.localStorage.judgeCloseLoadIndexDB = true
     // var indexDB = window.indexedDB
     // indexDB.deleteDatabase('kangruideIndexDB')
   }
   var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB

   if (indexedDB) {
     this.nonsupport_indexdb = false
     if (window.localStorage.judgeCloseLoadIndexDB) {
       this.getBaseData()
     } else {
       var indexDB = window.indexedDB
       var req = indexDB.open('kangruideIndexDB')
       req.onsuccess = () => {
         var curDb = req.result // curDb为数据库对象,用来操作数据表,维护数据表
         var objectStoreNames = JSON.stringify(curDb.objectStoreNames)

         if (objectStoreNames.indexOf('upload_review') !== -1) {
           this.file_obj = JSON.parse(window.localStorage.file_obj)
           this.zipfile_index = JSON.parse(window.localStorage.zipfile_index) // 存储文件在数组中的索引对象
         } else {
           this.getBaseData()
         }
       }
     }
   } else {
     this.$confirm('浏览器不支持在线预览,请进行下载预览', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       this.nonsupport_indexdb = true
       this.$router.push('/asset/upload_review')
     }).catch(() => {
       this.$alert('取消提交', '提示', {type: 'success'})
     })
   }
 },
 methods: {
   gotoBack () { // 推出到列表则删除数据库
     var indexDB = window.indexedDB
     indexDB.deleteDatabase('kangruideIndexDB')
     window.localStorage.removeItem('file_obj')
     window.localStorage.removeItem('zipfile_index')
     this.$router.go(-1)
   },
   selectedFile (el) {
     let li = document.getElementsByClassName('file_review_list')[0].children
     for (let i = 0, liL = li.length; i < liL; i++) {
       li[i].className = ''
     }
     el.currentTarget.className = 'on'
   },
   openfile (value, keys) {
     window.localStorage.file_obj = JSON.stringify(this.file_obj) // 存储文件对象树

     window.localStorage.curFileObjBranch = JSON.stringify(value) // 存储当前文件对象分支

     if (!window.localStorage.curFileHierarchy) { // 在localStorage中存储对象在文件对象树上的层级-即当前目录层级
       window.localStorage.curFileBranchHierarchy = 0 // 默认0层
     }
     var curfileIndexDbIndexObj = {} // 存放双击的文件在indexDB中的索引信息对象

     window.localStorage.curFileBranchHierarchy = 1 // 在localStorage中存储对象在文件对象树上的层级-即当前目录层级
     window.localStorage.curFileBranchPath = keys // 在localStorage中存储对象在文件对象树上的层级-即当前目录路径

     if (this.$task.getType(value) === 'obj') { // 判断是不是对象,是对象则为文件夹
       // 如果为文件夹则存入其对象分支,当前对象在文件对象树上的层级,并跳转至文件列表页面

       window.localStorage.zipfile_index = JSON.stringify(this.zipfile_index) // 存储文件在数组中的索引对象
       this.$router.push('/property/uploadreviewdetails')
     } else { // 不是对象则为文件
       // 如果为文件则存入其信息,跳转文件处理页面
       curfileIndexDbIndexObj = {index: this.zipfile_index[keys], filename: keys}
       // 把文件索引信息存入localStorage
       window.localStorage.curfileIndexDbIndexObj = JSON.stringify(curfileIndexDbIndexObj)
       this.$router.push('/property/uploadreviewfile')
     }
     // console.log(window.localStorage.curFileHierarchy)
   },
   fileTypeNameJudge (fileName) {
     if (fileName.indexOf('.') !== -1) {
       var sliptFileNameArr = fileName.split('.')
       if (sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'jpg' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'png' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'jpeg' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'gif'
       ) {
         return { file_status: 0, file_type: 'photo' }
       } else if (sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xls' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlsx' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlsm' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xltx' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xltm' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlt'
       ) {
         return { file_status: 0, file_type: 'excel' }
       } else {
         return { file_status: 0, error_name: '无法识别此文件' }
       }
     } else {
       return { file_status: 1, file_type: 'dir' }
       // return { file_status: 1, error_name: '读取错误' }
     }
   },
   handleFileName (filename) {
     var returnObj = {}
     var str = ''
     var parentMax = null
     var curParent = null
     // 文件名的处理
     if (filename.indexOf('/') !== -1) {
       var fileNameArr = filename.split('/')
       for (var i = 0; i < fileNameArr.length; i++) {
         if (i === 0) {
           returnObj[fileNameArr[0]] = {}
           parentMax = fileNameArr[0]
         } else {
           if (i === 1) {
             if (this.fileTypeNameJudge(fileNameArr[1]).file_status === 0) {
               returnObj[fileNameArr[0]][fileNameArr[1]] = fileNameArr[1]
             } else {
               returnObj[fileNameArr[0]][fileNameArr[1]] = {}
               curParent = fileNameArr[1]
               str = fileNameArr[1]
             }
           } else {
             str = str + '/' + fileNameArr[i]
           }
         }
       }
     } else {
       // 如果没有'/'则是文件,不是文件夹
       returnObj[filename] = filename
     }
     var firstafter = {}
     if (str !== '') {
       firstafter = this.handleFileName(str)
     }
     if (curParent !== null) {
       returnObj[parentMax] = firstafter
       // console.log(returnObj[parentMax])
     }
     return returnObj
   },
   getBaseData () {
     var Zip = new JSZip()
     console.log(Zip)
     var self = this
     var url = '/static/lookview.zip'
     var xmlhttp = null
     if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
       /* eslint-disable no-new */
       xmlhttp = new window.XMLHttpRequest()
     } else { // code for IE6, IE5
       /* eslint-disable no-new */
       xmlhttp = new window.ActiveXObject('Microsoft.XMLHTTP')
     }
     xmlhttp.open('GET', url, true)
     xmlhttp.withCredentials = true

     // recent browsers
     if ('responseType' in xmlhttp) {
       xmlhttp.responseType = 'arraybuffer'
     }

     // older browser
     if (xmlhttp.overrideMimeType) {
       xmlhttp.overrideMimeType('text/plain; charset=x-user-defined')
     }
     xmlhttp.send()
     xmlhttp.onreadystatechange = function () {
       if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
         var file = xmlhttp.response || xmlhttp.responseText
         console.log(file)
         JSZip.loadAsync(file).then(function (zip) {
           console.log(zip)
           zip.forEach(function (relativePath, zipEntry) {
             var fileName = zipEntry.name
             // console.log(zipEntry.name)
             if (zipEntry.name.slice(zipEntry.name.length - 1) !== '/') {
               // console.log(zip.folder(zipEntry.name))
               zip.file(zipEntry.name).async('base64').then(function success (text) {
                 var indexDB = window.indexedDB
                 var curDb = null
                 var req = indexDB.open('kangruideIndexDB', 3)
                 req.onupgradeneeded = function () {
                   // 创建表的结构
                   var db = req.result
                   db.createObjectStore('upload_review', {
                     autoIncrement: 'file_id' // 指明当前数据id自增长(indexdb)
                   })
                 }

                 req.onsuccess = function () {
                   // 在成功后对象的result属性为本次申请的结果
                   curDb = req.result // curDb为数据库对象,用来操作数据表,维护数据表
                   var tran = curDb.transaction(['upload_review'], 'readwrite')
                   var objectStore = tran.objectStore('upload_review')
                   // console.log(objectStore)
                   var zipFile = {
                     file_name: fileName,
                     file_content: text
                   }
                   var adduser = objectStore.add(zipFile) // 为当前数据表增加记录
                   adduser.onsuccess = function () {
                     self.zipfile_index[fileName] = adduser.result

                     self.upload_review_file_name.push(fileName)
                     var fileObj = JSON.parse(JSON.stringify(self.file_obj))
                     var fileReturnObj = self.handleFileName(fileName)
                     for (var i in fileReturnObj) {
                       // 先判断这层目录存在与否,如存在则添加,不存在则创建
                       if (fileObj[i]) {
                         fileObj[i] = Object.assign(fileObj[i], fileReturnObj[i])
                       } else {
                         fileObj[i] = fileReturnObj[i]
                       }
                     }
                     self.file_obj = JSON.parse(JSON.stringify(fileObj))
                   }
                 }
               }, function error (e) {
               })
             }
           })
         })
       }
     }
   }
 }
}
</script>

代码说明:我们通过self.zipfile_index[fileName] = adduser.result来记录路径信息在indexDB数据库中的索引,由于我们的文件对象树和文件在数组中的索引对象需要跨页面显示,于是用上了另一个本地存储localStorage,这里详细说说,openfile这个方法:
当我们双击某一个文件夹或文件时,我们把这个文件的分支对象树传递下去,下面依照这个来进行显示,同时我们进入一个目录时,还需记录当前目录的层级,以及它的目录路径,如果在我们的文件对象树上你双击的是一个文件,我们在upload_review_file文件中进行相应的文件处理,如果你双击的是一个文件夹,则在upload_review_details文件中进行文件夹的处理,不同的是,点击文件夹的时候我们需要存储文件在数组中的索引对象,点击文件时,我们要把文件信息进行处理,使用window.localStorage.curfileIndexDbIndexObj,把文件索引信息存入localStorage,在upload_review_file文件需要的时候进行调用。
到了这里大家明白在upload_review_file文件中我们处理任何的文件信息,在upload_review_file文件中我们处理任何包含目录的信息,在upload_review文件中则是我们的顶目录。

我们把/page/property/upload_review_file.vue文件最终的代码附上:

<template>
 <div>
   <!-- top -->
   <section class="admin_tool">
     <div class="admin_tool_btn">
       <el-button size="small" @click="gotoBack">
         <i class="fa-chevron-left"></i>
         <span>返回</span>
       </el-button>
     </div>
     <div class="admin_location">
       <el-breadcrumb>
         <el-breadcrumb-item>zip在线预览-文件查看</el-breadcrumb-item>
       </el-breadcrumb>
     </div>
   </section>
   <section class="file_review">
     <h3>文件预览</h3>
     <span class="file_breadcrumb" v-text="this.curfile_infor.file_name"></span>
     <div class="review_box" v-if="this.curfile_infor.file_name">
       <template v-if="fileTypeNameJudge(this.curfile_infor.file_name).file_type === 'photo' && fileTypeNameJudge(this.curfile_infor.file_name).file_status === 0">
         ![]('data:image/jpeg;base64,' + this.curfile_infor.file_content)
       </template>
       <div class="excel_review" v-if="fileTypeNameJudge(this.curfile_infor.file_name).file_type === 'excel' && fileTypeNameJudge(this.curfile_infor.file_name).file_status === 0">
         <!-- 通过a标签download属性,配合href连接('data:application/vnd.ms-excel;base64,' + base64编码)解码来实现文件下载 -->
         <i class="icon_excel"></i>
         <em v-text="this.curfile_infor.file_name"></em>
         <a :download="this.curfile_infor.file_name" :href="requestfileinfor" @click="downloadExcel(curfile_infor.file_content)">
           <el-button type="primary" size="mini">下载表格</el-button>
         </a>
       </div>
       <span v-if="fileTypeNameJudge(this.curfile_infor.file_name).error_name === '无法识别此文件' && fileTypeNameJudge(this.curfile_infor.file_name).file_status === 0">
         <i class="fa-exclamation-circle fa-2x file-icon"></i>
         {{'无法识别此文件'}}
       </span>
       <span v-if="fileTypeNameJudge(this.curfile_infor.file_name).file_type === 'dir' && fileTypeNameJudge(this.curfile_infor.file_name).file_status === 1">
         <i class="fa-file fa-2x file-icon"></i>
         <span v-text="value.filename"></span>
       </span>
     </div>
   </section>
 </div>
</template>
<script>
export default {
 data () {
   return {
     requestfileinfor: null,
     curlocal_infor: {},
     curfile_infor: {}
   }
 },
 created () {
   this.getBaseData()
 },
 methods: {
   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(0, pathArray.length - 1)[0]]
         } else {
           // 不是初始值在curFileObjBranch中取
           curFileObjBranch = curFileObjBranch[pathArray.slice(0, pathArray.length - 1)[i]]
         }
       }
       window.localStorage.curFileBranchPath = curFilePath

       window.localStorage.curFileObjBranch = JSON.stringify(curFileObjBranch)
     } else {
       window.localStorage.removeItem('curfileIndexDbIndexObj')
       window.localStorage.removeItem('curFileObjBranch')
       window.localStorage.removeItem('curFileBranchPath')
       window.localStorage.removeItem('curFileBranchHierarchy')
     }
     this.$router.go(-1)
   },
   downloadExcel (filecontent) {
     this.requestfileinfor = 'data:application/vnd.ms-excel;base64,' + filecontent
   },
   fileTypeNameJudge (fileName) {
     if (fileName.indexOf('.') !== -1) {
       var sliptFileNameArr = fileName.split('.')
       if (sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'jpg' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'png' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'jpeg' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'gif'
       ) {
         return { file_status: 0, file_type: 'photo' }
       } else if (sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xls' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlsx' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlsm' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xltx' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xltm' ||
           sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlt'
       ) {
         return { file_status: 0, file_type: 'excel' }
       } else {
         return { file_status: 0, error_name: '无法识别此文件' }
       }
     } else {
       return { file_status: 1, file_type: 'dir' }
     }
   },
   getBaseData () {
     var self = this
     var curfileInfo = window.localStorage.curfileIndexDbIndexObj
     this.curlocal_infor = JSON.parse(curfileInfo)
     var indexDB = window.indexedDB

     var curDb = null
     var requestKeys = this.curlocal_infor.index
     var req = indexDB.open('kangruideIndexDB')
     req.onsuccess = function () {
       curDb = req.result // curDb为数据库对象,用来操作数据表,维护数据表
       var tran = curDb.transaction(['upload_review'], 'readwrite')
       var objectStore = tran.objectStore('upload_review')
       console.log(objectStore)
       var getopenfile = objectStore.get(requestKeys)
       getopenfile.onsuccess = function () {
         console.log(getopenfile.result)
         self.curfile_infor = getopenfile.result
       }
     }
   }
 }
}
</script>

代码说明:我们获取到window.localStorage.curfileIndexDbIndexObj传递过来的索引,然后通过indexDB特有的方式进行访问,我们取到了结果,如图:


这里由于网页不支持excel,所以我们赋予下载功能本地去打开,通过a标签的新属性download来下载:

<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(0, pathArray.length - 1)[0]]
          } else {
            // 不是初始值在curFileObjBranch中取
            curFileObjBranch = curFileObjBranch[pathArray.slice(0, pathArray.length - 1)[i]]
          }
        }
        window.localStorage.curFileBranchPath = curFilePath
        window.localStorage.curFileObjBranch = JSON.stringify(curFileObjBranch)
      } else {
        window.localStorage.removeItem('curfileIndexDbIndexObj')
        window.localStorage.removeItem('curFileObjBranch')
        window.localStorage.removeItem('curFileBranchPath')
        window.localStorage.removeItem('curFileBranchHierarchy')
      }
      this.$router.go(-1)
}

我们也把/page/property/upload_review_details.vue文件最终的代码附上:

<template>
  <div>
    <!-- top -->
    <section class="admin_tool">
      <div class="admin_tool_btn">
        <el-button size="small" @click="gotoBack">
          <i class="fa-chevron-left"></i>
          <span>返回</span>
        </el-button>
      </div>
      <div class="admin_location">
        <el-breadcrumb>
          <el-breadcrumb-item>zip在线预览</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </section>
    <section class="file_review">
      <h3>文件预览</h3>
      <span class="file_breadcrumb" v-text="breadcrumb"></span>
      <ul class="file_review_list">
        <li class="file_list_other" v-for="(value, keys, index) in curFileObjBranch" @click="selectedFile($event)" @dblclick="openfile(value, keys)">
          <template v-if="fileTypeNameJudge(keys).file_type === 'photo' && fileTypeNameJudge(keys).file_status === 0">
            <i class="icon_photo"></i>
            <span v-text="keys"></span>
          </template>
          <template v-if="fileTypeNameJudge(keys).file_type === 'excel' && fileTypeNameJudge(keys).file_status === 0">
            <i class="icon_excel"></i>
            <span v-text="keys"></span>
          </template>
          <template v-if="fileTypeNameJudge(keys).error_name === '无法识别此文件' && fileTypeNameJudge(keys).file_status === 0">
            <i class="icon_errorfile"></i>
            <span v-text="keys"></span>
          </template>
          <template v-if="fileTypeNameJudge(keys).file_type === 'dir' && fileTypeNameJudge(keys).file_status === 1">
            <i class="icon_finder"></i>
            <span v-text="keys"></span>
          </template>
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
export default {
  data () {
    return {
      file_obj: {},
      zipfile_index: {},
      curFileObjBranch: [],
      imgUrlArr: null,
      breadcrumb: this.$store.get('curFileBranchPath')
    }
  },
  created () {
    this.getBaseData()
  },
  methods: {
    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(0, pathArray.length - 1)[0]]
          } else {
            // 不是初始值在curFileObjBranch中取
            curFileObjBranch = curFileObjBranch[pathArray.slice(0, pathArray.length - 1)[i]]
          }
        }
        window.localStorage.curFileBranchPath = curFilePath

        window.localStorage.curFileObjBranch = JSON.stringify(curFileObjBranch)
        this.$router.push('/property/uploadreviewdetails')
        this.getBaseData()
      } else {
        window.localStorage.removeItem('curfileIndexDbIndexObj')
        window.localStorage.removeItem('curFileObjBranch')
        window.localStorage.removeItem('curFileBranchPath')
        window.localStorage.removeItem('curFileBranchHierarchy')
        this.$router.go(-1)
      }
    },
    selectedFile (el) {
      let li = document.getElementsByClassName('file_review_list')[0].children
      for (let i = 0, liL = li.length; i < liL; i++) {
        li[i].className = ''
      }
      el.currentTarget.className = 'on'
    },
    openfile (value, keys) {
      window.localStorage.curFileObjBranch = JSON.stringify(value) // 存储当前文件对象分支
      window.localStorage.curFileBranchHierarchy++ // 加层级-即当前目录层级
      var parentPath = window.localStorage.curFileBranchPath // 获取父级路径
      window.localStorage.curFileBranchPath = parentPath + '/' + keys // 当前目录路径
      var curfileIndexDbIndexObj = {} // 存放双击的文件在indexDB中的索引信息对象
      if (this.$task.getType(value) === 'obj') { // 判断是不是对象,是对象则为文件夹
        // 如果为文件夹则存入其对象分支,当前对象在文件对象树上的层级,并跳转至文件列表页面

        window.localStorage.zipfile_index = JSON.stringify(this.zipfile_index) // 存储文件在数组中的索引对象
        this.$router.push('/property/uploadreviewdetails')
        this.getBaseData()
      } else { // 不是对象则为文件
        // 如果为文件则存入其信息,跳转文件处理页面
        curfileIndexDbIndexObj = {index: this.zipfile_index[parentPath + '/' + keys], filename: keys}
        // 把文件索引信息存入localStorage
        window.localStorage.curfileIndexDbIndexObj = JSON.stringify(curfileIndexDbIndexObj)
        this.$router.push('/property/uploadreviewfile')
      }
    },
    fileTypeNameJudge (fileName) {
      if (fileName.indexOf('.') !== -1) {
        var sliptFileNameArr = fileName.split('.')
        if (sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'jpg' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'png' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'jpeg' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'gif'
        ) {
          return { file_status: 0, file_type: 'photo' }
        } else if (sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xls' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlsx' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlsm' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xltx' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xltm' ||
            sliptFileNameArr[sliptFileNameArr.length - 1].toLowerCase() === 'xlt'
        ) {
          return { file_status: 0, file_type: 'excel' }
        } else {
          return { file_status: 0, error_name: '无法识别此文件' }
        }
      } else {
        return { file_status: 1, file_type: 'dir' }
        // return { file_status: 1, error_name: '读取错误' }
      }
    },
    getBaseData () {
      this.zipfile_index = JSON.parse(window.localStorage.zipfile_index) // 存储文件在数组中的索引对象
      this.curFileObjBranch = JSON.parse(window.localStorage.curFileObjBranch) // 获取当前文件对象分支
    }
  }
}
</script>

代码说明: 先获取文件在数组中的索引对象及当前文件对象分支,然后渲染,双击文件时跟上面的类似,就是在返回上一级的时候麻烦些,得从文件对象树里面找到当前分支的位置,然后把当前分支的父级找到,再父级分支变为当前分支,减去目录层级以及相关信息的存储。

到了这里实战就结束了,完整的样子展示如图:




小结:

至此这个项目实战就结束了,总计奋战了好几天,这里想办法在github上把项目:VUEIndexDBOnlineZIP分享给大家,祝大家学习愉快。

提示:在最近几天我会慢慢附上VUE系列教程的其他后续篇幅,后面还有精彩敬请期待,请大家关注我的专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。

日记本
Web note ad 1