【Antd】基于 Upload 组件，导入Json文件并转换为Json数据

一颗不甘坠落的流星2025-12-13 22:00

文章目录

- 组件封装

组件封装

js 复制代码

import { Upload, message } from 'antd';

export default function JsonFileImport({ onFileImport }) {
  // 处理文件选择变化
  const handleChange = (info) => {
    // 从info对象中获取原始的File对象:cite[5]
    const rawFile = info.file.originFileObj || info.file;

    if (rawFile) {
      // 1. 创建FileReader读取文件
      const reader = new FileReader();
      reader.onload = (event) => {
        try {
          // 2. 将读取到的文本解析为JSON对象
          const parsedData = JSON.parse(event.target.result);
          // 3. 抛到父组件处理json数据
          onFileImport(parsedData);
          message.success(`${rawFile.name} 文件读取成功`);
        } catch (error) {
          message.error(`${rawFile.name} 文件不是有效的JSON格式`);
          console.error('JSON解析错误:', error);
          onFileImport(null);
        }
      };
      reader.onerror = () => {
        message.error(`读取文件 ${rawFile.name} 失败`);
        onFileImport(null);
      };
      // 4. 开始以文本形式读取文件
      reader.readAsText(rawFile);
    }
  };
  const uploadProps = {
    accept: '.json,.jsonl', // 可选：限制只能选择.json文件:cite[1]
    beforeUpload: () => false, // 阻止自动上传，直接返回文件对象:cite[4]
    onChange: handleChange,
    showUploadList: false, // 不显示默认的文件列表
  };

  return <Upload {...uploadProps}>文件导入</Upload>;
}