将zip文件转化成json

1.安装JSZipUtils

2.引用

import JSZipUtils from 'jszip-utils'

3.使用

/**

 * 获取远程zip文件转化成json

 * @param url 远程文件地址

 * @returns

 */

function getRomoteZipFile(zipUrl) {

  return new Promise((resolve, reject) => {

    JSZipUtils.getBinaryContent(zipUrl, function (err, data) {

      if (err) {

        reject(err)

      } else {

        JSZip.loadAsync(data).then(function (zip) {

          const fileName = Object.keys(Object.values(zip)[0])[0] // 获取文件名

          zip

            .file(fileName)

            .async('string')

            .then(function (data) {

              const datas = JSON.parse(data) // 与后端约定压缩包内只有一个文件且为JSON格式,更多格式可参考JSZip官网

              resolve({

                code: 0,

                data: datas,

                msg: '成功'

              })

            })

        })

      }

    })

  })

}

欢迎补充,一起进步。

antd的`Upload`组件可以通过设置`accept`属性来限制上传文件的类型,同时可以通过设置`beforeUpload`属性来对上传的文件进行进一步的验证。你可以按照以下步骤实现上传`.zip`文件,并且验证是否包含`.json`文件: 1. 设置`accept`属性为`.zip`,示例代码如下: ``` <Upload accept=".zip" beforeUpload={beforeUpload}> <Button icon={<UploadOutlined />}>Click to Upload</Button> </Upload> ``` 2. 在`beforeUpload`函数中对上传的文件进行验证,判断是否包含`.json`文件,示例代码如下: ``` function beforeUpload(file) { const isZip = file.type === 'application/zip'; if (!isZip) { message.error('You can only upload ZIP file!'); } const reader = new FileReader(); reader.onload = () => { const { name } = file; const zip = new JSZip(); const zipFile = reader.result; zip.loadAsync(zipFile).then((content) => { const files = Object.keys(content.files); const isJsonIncluded = files.some((filename) => filename.includes('.json')); if (!isJsonIncluded) { message.error(`${name} does not contain JSON file!`); } }); }; reader.readAsArrayBuffer(file); return isZip; } ``` 在`beforeUpload`函数中,首先判断上传的文件是否是`.zip`文件,如果不是,则提示上传错误信息。如果上传的是`.zip`文件,则通过`JSZip`库对文件进行解压缩,并判断解压缩后的文件中是否包含`.json`文件。如果不包含,则提示上传错误信息。最后,返回`isZip`变量,告诉`Upload`组件是否可以上传文件。 需要注意的是,在使用`JSZip`库对文件进行解压缩时,需要先将文件换成`ArrayBuffer`类型,然后再进行解压缩。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值