配置导入与导出

Amelie4444

已于 2024-03-21 19:08:10 修改

阅读量152

点赞数

分类专栏： js的小段落文章标签：前端 javascript json

于 2023-01-18 15:06:58 首次发布

本文链接：https://blog.csdn.net/Amelie4444/article/details/128726618

版权

js的小段落专栏收录该内容

3 篇文章 0 订阅

订阅专栏

该文章展示了一个React组件，用于处理.json文件的导入和导出功能。组件内部使用FileReader读取上传的文件内容，将文本转换为JSON，然后调用savePages函数进行数据保存。导入成功或失败的信息会显示在模态框中。同时，文章还涉及了Promise的使用以及自定义确认对话框的实现。

摘要由CSDN通过智能技术生成

导入

export default function ImportPages(props: ImportPagesProps) {
  const { projectNo, projectId, onSuccess, id } = props;
  const onChange = (file) => {
    const reader = new FileReader();
    const blob = new Blob([file.file], {
      type: 'text/plain',
    });
    reader.readAsText(blob, 'utf-8');
    reader.onload = async () => {
      try {
        if (typeof reader.result === 'string') {
          const fileData = JSON.parse(reader.result);
          const res = await savePages(id, fileData, projectNo, projectId);
          onSuccess(res.every((v) => +v.code !== 0));
          Modal.info({
            title: '提示',
            content: (
              <>
                {res.map((v, i) => (
                  <div>
                    {fileData[i].name} {fileData[i].pagePath}
                    <span style={{ color: +v.code === 0 ? '#00bc70' : 'red' }}>
                      {+v.code === 0 ? '导入成功' : '导入失败'}
                    </span>
                  </div>
                ))}
              </>
            ),
          });
        }
      } catch (error) {
        console.warn(error);
      }
    };
  };

  return (
    <Upload accept=".json" customRequest={onChange} showUploadList={false}>
      <Button type="primary">导入</Button>
    </Upload>
  );
}

导出

 <ImportPages
              projectNo={search.projectNo}
              projectId={search.projectId}
              onSuccess={(isFail) => !isFail && getPageList(true, pageInfo)}
            />
            <Button
              style={{ borderRadius: '4px' }}
              onClick={() => {
                const blob = new Blob([JSON.stringify(pageList)], {
                  type: 'text/plain',
                });
                const filename = `${search.channelCode}-${search.projectNo}-${moment().format(
                  'MM_DD HH_mm_ss',
                )}.json`;
                openFile.downloadWithBlob(blob, filename);
              }}
            >
              导出
            </Button>

封装promise

   const confirmPromise = () => new Promise((resolve) => {
          Modal.confirm({
            content: '温馨提示：同学，详情可关注页面最下方“我已阅读并确认"内容',
            okText: '我已知晓',
            cancelText: '去看看',
            onOk: () => {
              resolve(1);
            },
            onCancel: () => {
              resolve(0);
            }
          });

        });

        const confirmRes = yield call(confirmPromise);