JSZip读取上传文件内容
2022-02-21
JSZip是一个用于创建、读取和编辑.zip文件的javascript库,带有友好而简单的API。
JSZip读取上传文件内容用loadAsync,然后用FileReader读取压缩包中的具体文件,进而转换为实际应用的数据格式。
loadAsync(data [, options])
读取现有 zip 并在当前文件夹级别合并当前 JSZip 对象中的数据。
import JSZip from 'jszip';
/** 异步文件读取 */
const readTextAs = (arrayBuffer, encoding) => {
return new Promise((resolve, reject) => {
var reader = new FileReader();
var blob = new Blob([arrayBuffer]);
reader.onload = function (evt) {
resolve(evt.target.result);
};
reader.onerror = function (evt) {
reject(null);
};
reader.readAsText(blob, encoding);
}).catch(e => {
reject(e);
})
}
/**
* jszip 读取压缩包中同名文件
* 压缩包里面的文件合集在zip.files
*/
const parse_zip = file_data => {
return new Promise((resolve, reject) => {
JSZip.loadAsync(file_data).then(function(zip) {
zip.files[file_data.name].async('blob').then((blob) => {
readTextAs(blob, "UTF-8").then(e =>{
resolve(e);
}).catch(e => {
reject(e);
});
})
}).catch(e => {
reject(e);
})
})
}
/** 解析出应用数据格式,如json等 */
const parse_data = (file_data) => {
return new Promise((resolve, reject) => {
parse_zip(file_data).then(e => {
let data = null;
try {
data = JSON.parse(e);
}
catch (e) {
data = null;
}
data ? resolve(data) : reject(null);
}).catch(e => {
reject(e);
})
});
}
export default parse_data;
<input type="file" id="file" name="file" multiple />
<script>
$("#file").on("change", function(evt) {
var files = evt.target.files;
for (var i = 0; i < files.length; i++) {
parse_data(files[i]);
}
})
</script>
参考资料
- https://www.cnblogs.com/Demiwang/p/12911028.html
- https://stuk.github.io/jszip/documentation/examples/read-local-file-api.html
- https://stuk.github.io/jszip/documentation/api_jszip/load_async.html