JSZip读取上传文件内容

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