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-->

<br> <template><br> <div><br> <h1>Reading a local file </h1><br> <div><br> <h2>解压本地zip</h2><br> 本地路径(ie): <input type="text" v-model="localPath[0]" /><button @click="handleIeZips">解压</button><br> </div></p> <p><el-row id="result"><br> <el-col :span="8" v-for="item in results"><br> <el-image :src="item" ></el-image><br> </el-col><br> </el-row><br> </div><br> </template></p> <p><script><br> import JSZip from 'jszip'<br> import { pathToDataURL,dataURLtoFile,arrayBufferToBase64} from '../../../utils/activexobj'<br> export default {<br> name: 'demo',<br> data() {<br> return {<br> results:[],<br> localPath:['C:\Users\cjq\Desktop\images.zip']</p> <p>}<br> },<br> methods:{<br> // ie<br> handleIeZips(){<br> this.results=[];<br> this.localPath.forEach(v =>{<br> var dataUrl =pathToDataURL(v);<br> var blob =dataURLtoFile(dataUrl);<br> this.handleFile(blob);<br> })<br> },<br> handleFile(blob){<br> var zip = new JSZip();<br> zip.loadAsync(blob)<br> .then((file) => {<br> var files=file.files;<br> for (let f in files) {<br> zip.file(f).async("arraybuffer").then((buffer) => {<br> var base64 = arrayBufferToBase64(buffer,f);<br> try{<br> this.results.push(base64);<br> }catch(e){<br> console.log(e);<br> }</p> <p>});<br> }<br> }, function (e) {<br> alert("Error reading : " + e.message);<br> });<br> },<br> },<br> };<br> </script><br> <style scoped><br> input[type='text']{<br> height: 28px;<br> width: 300px;<br> }<br> #result{<br> margin-top:30px;<br> }<br> #result .el-image{<br> height: 200px;<br> }<br> </style><br>

<!--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);
            }