a543462378 2022-04-20 10:12 采纳率: 84.7%
浏览 41
已结题

react导入excal文件,要怎么做前端验证?

react项目,做了前端导入功能,要求前端把数据转化一下然后验证再给后端,转化完成之后验证要怎么写?能不能写个例子或者推荐个例子?
文件读取如下

export default ({ setList, disabled }) => {

    function beforeUpload(file) {
        if (typeof file.name === 'string' && file.name.indexOf('xlsx') > -1) {
            read(file);
        } else {
            message.error('请上传xlsx文件,建议下载模板');
        }
        return false;
    }

    // 读文件
    function read(file) {
        const reader = new FileReader();
        reader.onload = e => {
            const data = new Uint8Array(e.target.result);
            const workbook = XLSX.read(data, {
                type: 'array'
            });
            
            const firstSheetName = workbook.SheetNames[0];
            const sheet = workbook.Sheets[firstSheetName];
            const res = XLSX.utils.sheet_to_json(sheet);
            console.log('json: ', res);
            setList(res);
            
        }
        reader.readAsArrayBuffer(file);
    }

    return (
        <Upload
            beforeUpload={beforeUpload}
            showUploadList={false}
        >
            <Tooltip title="导入将覆盖全部数据">
            <Button type='primary'  size='small' disabled={disabled}>导入</Button>
            </Tooltip>
        </Upload>
    )
}

文件转换如下

if (addDataList.length > 0) {
      const newList = []
      addDataList.forEach(item => {
        let text = item['污染物类型'];
        if (text === '船舶垃圾') text = '0';
        if (text === '生活污水') text = '1';
        if (text === '含油污水') text = '2';
        let text2 = item['作业方式'];
        if (text2 === '垃圾自转运至处置') text2 = '0';
        if (text2 === '污水经管道运输至处置设备') text2 = '1';
        if (text2 === '补录接收') text2 = '2';
        if (text2 === '智能设备接收') text2 = '3';
        if (text2 === '扫车船码接收') text2 = '4';
        if (text2 === '扫码设备接收') text2 = '5';
        if (text2 === '预约接收') text2 = '6';
        if (text2 === '上岸即处理') text2 = '7';
        let text3 = item['转运状态'];
        if (text3 === '已转运') text3 = '0';
        if (text3 === '未转运') text3 = '1';
        if (text3 === '待受理') text3 = '2';
        if (text3 === '待确认') text3 = '3';
        newList.push({
          receiveNumbers: item['单号'],
          shipName: item['船名'],
          type: text,
          quantity: item['数量'],
          receiveCompany: item['接收单位'],
          taskCompany: item['作业单位'],
          taskTime: item['接收开始时间'],
          taskMode: text2,
          state: text3
        })
      })
      let newLists = newList.filter((item) => {
        return JSON.stringify(item) != "{}";
      });
      const params = id.split('-');
          updateDetails({
            taskFid: params[0],
            taskType: params[1],
            code: 1,
            data: {
              status: '1',
              list: [...newLists, ...list1, ...list2],
            }
          }).then(res => {
            if (res.code === '0') {
              message.success('上传成功')
              getList();
              handleRefresh();
            }
          })
    }
  }, [addDataList]);

验证规则:船名是否为空;数量是否为数值;接收单位是否为空;作 业单位是否为空;作 业时间格式是否为:“2021-07-22 18:07:00”,且是否属于对应周内;作 业方式是否为“垃圾自转运至处置”、“污水经管道运输至处置设备”、“污水直排市政管道”、“码头补录”、“智能设备接收”、“扫车船码接收”、“扫码设备接收”、“预约接收”;状态是否为“已转运”、“未转运”、“待受理”、“待确认”。

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-04-20 11:00
    关注

    那你首先 读取 文件 ,然后 解析 出 数据 ,数据 要做验证 那你需要 遍历数据 ,对数据项 用正则 或者其它规则 判断 不符合 就提示

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 6月24日
  • 已采纳回答 6月16日
  • 创建了问题 4月20日

悬赏问题

  • ¥15 cocos的点击事件 怎么穿透到 原生fragment上。
  • ¥20 基于相关估计的TDOA算法中的加权最小二乘拟合法matlab仿真
  • ¥20 基于相关估计的TDOA算法中的自适应加权广义互相关法。
  • ¥15 abaqus CAE 2024软件启动问题
  • ¥20 基于相关估计的TDOA算法中的局部互相关函数滤波matlab仿真
  • ¥15 CDH6.0.1 hue报错
  • ¥15 javaFX利用scene builder的fxml文件进行开发时的label setText方法未生效问题
  • ¥15 notepad++ 自动补全提示,如输入汉字"人名",就会出现"张三","李四"
  • ¥15 如何用matlab实现PSO算法与两种智能优化算法在30维和50维问题上的性能比较?
  • ¥15 在qt的QGraphicsView和QGraphicsScene中遇到的问题