json转成blob blob转成json json数据转成zip导出 zip的解析 导入本地 json/zip new FileReader()

json转成blob

 const blob = new Blob([JSON.stringify('json数据')], {
    type: "application/json",
  });

blob转成json

这里用promise 否则reader.onload里面生成的body数据外面无法拿到
const fileReaderPromise = (blob, fileName) => {
	return new Promise((resolve, reject) => {
		let target = null;
		const reader = new FileReader();
		reader.onload = () => {
			const tempRes = JSON.parse(reader.result)
			const { body, statusCode } = tempRes
			if (statusCode != 200) {
				return reject('接口异常');
			}
			//这里的body就是转成的json
			if (body) {
				resolve(body)
			} else {
				reject(null)
			}
		};
		reader.readAsText(blob);
	})
}

json数据转成zip导出

转成blob通过zip.file将内容塞到zip中调用zip.generateAsync生成zip
最后通过saveAs()导出到本地生成zip

import JSZip from 'jszip'
import { saveAs } from "file-saver";
export const moreJsonToZip = async (arr) => {
	console.log('导出的数据', arr);
	const zip = new JSZip();
	arr.forEach(item => {
		const { name, data } = item
		const blob = new Blob([JSON.stringify(data)], {
			type: "application/json",
		});
		zip.file(name, blob);
	})
	const resBlob = await zip.generateAsync({
		type: "blob",
		compression: "DEFLATE",
		compressionOptions: {
			level: 9,
		},
	});
	return resBlob
	// saveAs(resBlob, zipName)
}

const tempArr = [
  { name: projImpAndExp.config, data: configData },
  { name: projImpAndExp.points, data: pointsData },
  { name: projImpAndExp.loginConfig, data: bodyLogin },
];
const tempBlob = await moreJsonToZip(tempArr);
saveAs(tempBlob , ‘xxx.zip’)

zip的解析

//获取zip并解压 
const analysisZipApiData = async (data, fileName) => {
	const zip = new JSZip();
	//解析zip压缩包
	const { files } = await zip.loadAsync(data, { optimizedBinaryString: true });
	//files 就是zip中的json文件对象
	//解析zip文件中的`${fileName}.json`这个json文件
	const config = await files[`${fileName}.json`].async('string')
	return JSON.parse(config)
}

如果接口上传的数据量很大可以使用zip压缩包方式上传。参数以formData方式上传（参数和zip压缩包）

  const blob = new Blob([JSON.stringify('这里')], {
    type: "application/json",
  });

  const file = new File([blob], projImpAndExp.loginConfig);
  const formData = new FormData();
  //FormData对象附加File或Blob类型的文件(file就是继承了blob)
  formData.append("uploadFile", file);
  formData.append("pid", subProjectId.value);
  return postLoginConfigApi(formData);

导入本地 json/zip

const fileValue = refFile.value.files[0];
const reader = new FileReader();
const { type } = fileValue;
//读取方式
if (type === "application/x-zip-compressed") {
  	//解析压缩包用 blob转arrayBuffer
  reader.readAsArrayBuffer(fileValue);
} else {
  	//json用
  reader.readAsText(fileValue);
}
reader.onloadend = async () => {
  try {
  	  //内部处理逻辑
	  let body = JSON.parse(reader.result);	//如果是json
	  //如果是压缩包就解析压缩包返回json
  }catch(){}
}

知识补充
1.new File( ) 构造器创建新的 File 对象实例

2.new FileReader();
异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据

const reader = new FileReader();
//该事件在读取操作完成时触发
reader.onload = () => {}

**读取方式**

1.//将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)
reader.readAsText() 
2.//启动读取指定的 Blob 或 File 内容
reader.readAsArrayBuffer()

reader.result 
//返回文件的内容。只有在读取操作完成后，此属性才有效，
//返回的数据的格式取决于是使用哪种读取方法来执行读取操作的

数据类型转换
https://blog.csdn.net/weixin_44116302/article/details/122064841