jsZip解压本地zip并展示文件

问题场景

利用uFile插件下载zip到本地目录：C:\Users\cjq\AppData\LocalLow\UFILE\99001\temp\images.zip，现在把该zip里的图片展示出来

应对方案

利用ie的activeX将本地目录文件转Blob，jsZip读取Blob，然后读出单个文件将其转成base64，就可以展示出来了

代码实现

安装jsZip

cnpm install jsZip

zipDemo.vue

<!--zipDemo.vue--start-->
    <div class="code-div">
        <!--start-->
        <textarea rows="30">
          <template>
              <div>
                <h1>Reading a local file </h1>
                <div>
                  <h2>解压本地zip</h2>
                  本地路径(ie): <input type="text" v-model="localPath[0]" /><button @click="handleIeZips">解压</button>
                </div>

                <el-row id="result">
                 <el-col :span="8" v-for="item in results">
                   <el-image
                           :src="item"
                   ></el-image>
                 </el-col>
                </el-row>
              </div>
            </template>


            <script>
              import JSZip  from 'jszip'
              import { pathToDataURL,dataURLtoFile,arrayBufferToBase64} from '../../../utils/activexobj'
              export default {
                  name: 'demo',
                  data() {
                      return {
                          results:[],
                          localPath:['C:\\Users\\cjq\\Desktop\\images.zip']

                      }
                  },
                  methods:{
                      // ie
                      handleIeZips(){
                          this.results=[];
                          this.localPath.forEach(v =>{
                              var dataUrl =pathToDataURL(v);
                              var blob =dataURLtoFile(dataUrl);
                              this.handleFile(blob);
                          })
                      },
                      handleFile(blob){
                          var zip = new JSZip();
                          zip.loadAsync(blob)
                              .then((file) => {
                                  var files=file.files;
                                  for (let f in files) {
                                      zip.file(f).async("arraybuffer").then((buffer) => {
                                          var base64 = arrayBufferToBase64(buffer,f);
                                          try{
                                              this.results.push(base64);
                                          }catch(e){
                                              console.log(e);
                                          }

                                      });
                                  }
                              }, function (e) {
                                  alert("Error reading : " + e.message);
                              });
                      },
                  },
              };
            </script>
            <style scoped>
              input[type='text']{
                  height: 28px;
                  width: 300px;
              }
              #result{
                  margin-top:30px;
              }
              #result .el-image{
                  height: 200px;
              }
            </style>
        </textarea>
        <!--end-->
    </div>
    <!--zipDemo.vue--end-->

---

activexobj.js

//本地路径转base64
            export function pathToDataURL(file) {
              try{
                var type=file.slice(file.lastIndexOf(".")+1)
                var xmlHttp = new ActiveXObject('MSXML2.XMLHTTP.6.0');
                xmlHttp.open('POST',file, false);
                xmlHttp.send('');
                var xml_dom = new ActiveXObject('MSXML2.DOMDocument');
                var tmpNode = xml_dom.createElement('tmpNode');
                tmpNode.dataType = 'bin.base64';
                tmpNode.nodeTypedValue = xmlHttp.responseBody;
                var fileBase="";
                switch (type) {
                  case "pdf":fileBase="data:application/pdf;base64,";break;
                  case "jpg":fileBase="data:image/jpg;base64,";break;
                  case "png":fileBase="data:image/png;base64,";break;
                  case "bmp":fileBase="data:image/bmp;base64,";break;
                  case "zip":fileBase="data:application/x-zip-compressed;base64,";break;
                }
                var imgBase64Data = fileBase+tmpNode.text.replace(/\n/g,"");
                return imgBase64Data;
              }catch (e) {
                console.log(e);
              }
            }
            //base64转File(IE)
            export function dataURLtoFile(dataurl,fileName){
              var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              var theBlob=new Blob([u8arr], { type: mime });
              theBlob["lastModifiedDate"] = new Date();
              theBlob["name"] = fileName;
              return theBlob;
            }
            // arrayBuffer转base64
            export function arrayBufferToBase64( buffer,fileName ) {
              var type=fileName.slice(fileName.lastIndexOf(".")+1)
              var fileBase="";
              switch (type) {
                case "pdf":fileBase="data:application/pdf;base64,";break;
                case "jpg":fileBase="data:image/jpg;base64,";break;
                case "png":fileBase="data:image/png;base64,";break;
                case "bmp":fileBase="data:image/bmp;base64,";break;
                case "zip":fileBase="data:application/x-zip-compressed;base64,";break;
              }
              var binary = '';
              var bytes = new Uint8Array(buffer);
              var len = bytes.byteLength;
              for (var i = 0; i < len; i++) {
                binary += String.fromCharCode(bytes[i]);
              }
              return fileBase+window.btoa(binary);
            }