jszip压缩文件上传到服务器,2. jszip文件夹打包上传
[TOC]
[jszip官网](https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html)
### 1. 安装
~~~
npm install jszip
yarn add jszip // 亲测有效
~~~
### 2. 引入
~~~
import JSZip from 'jszip';
import * as JSZip from 'jszip'; // 亲测有效
~~~
### 3. 使用
~~~
let zipFile: JSZip = new JSzip();
~~~
### 4. 示例
[示例1](https://codepen.io/a631807682/pen/EMEKoL?editors=1011)
~~~
function zipFiles(dom){
let zip = new JSZip();
for(let f of dom.files){
zip.file(f.webkitRelativePath, f);
}
zip.generateAsync({type:"blob"})
.then(function (blob) {
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = 'test.zip';
link.click();
});
}
~~~
示例2
~~~
// webkitdirectory控制是否为上传文件夹
type="file"
class="add-file-input"
v-if="dataForm.type === 'GDB' || dataForm.type === 'SHAPE'"
@change="zipFiles"
multiple="multiple"
webkitdirectory
/>
// 上传文件夹、多选文件打包上传
zipFiles(e) {
const { files } = e.target
let flag = false
const zip = new JSZip()
for (let index = 0; index < files.length; index++) {
files[index].webkitRelativePath && zip.file(files[index].webkitRelativePath, files[index])
// 判断是否包含shp文件
if (files[index].name.slice(-4) === '.shp') {
flag = true
}
}
const arrPath = files[0].webkitRelativePath.split('/')
if (
(arrPath[0].slice(-4) === '.gdb' && this.dataForm.type === 'GDB') ||
(flag && this.dataForm.type === 'SHAPE')
) {
// return promise对象 该方法是异步方法
zip.generateAsync({ type: 'Blob', compression: 'DEFLATE' }).then(content => {
// 创建file对象
const fils = new File([content], arrPath[0], { type: 'zip' })
// console.log(fils)
this.file.fileData = fils
this.dataForm.name = fils.name
this.dataForm.connection.Path = `${fils.name}.zip`
})
} else {
this.$message.error(`上传文件格式应为${this.dataForm.type}类型!`)
this.file.fileData = ''
this.dataForm.name = ''
this.dataForm.connection.Path = ''
}
},
~~~
[示例3](https://www.cnblogs.com/dearxinli/p/8422140.html)
[示例4](https://blog.csdn.net/qq2523208472/article/details/83578722)