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

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

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

  1. export default ({ setList, disabled }) => {
  2. function beforeUpload(file) {
  3. if (typeof file.name === 'string' && file.name.indexOf('xlsx') > -1) {
  4. read(file);
  5. } else {
  6. message.error('请上传xlsx文件,建议下载模板');
  7. }
  8. return false;
  9. }
  10. // 读文件
  11. function read(file) {
  12. const reader = new FileReader();
  13. reader.onload = e => {
  14. const data = new Uint8Array(e.target.result);
  15. const workbook = XLSX.read(data, {
  16. type: 'array'
  17. });
  18. const firstSheetName = workbook.SheetNames[0];
  19. const sheet = workbook.Sheets[firstSheetName];
  20. const res = XLSX.utils.sheet_to_json(sheet);
  21. console.log('json: ', res);
  22. setList(res);
  23. }
  24. reader.readAsArrayBuffer(file);
  25. }
  26. return (
  27. <Upload
  28. beforeUpload={beforeUpload}
  29. showUploadList={false}
  30. >
  31. <Tooltip title="导入将覆盖全部数据">
  32. <Button type='primary' size='small' disabled={disabled}>导入</Button>
  33. </Tooltip>
  34. </Upload>
  35. )
  36. }

文件转换如下

  1. if (addDataList.length > 0) {
  2. const newList = []
  3. addDataList.forEach(item => {
  4. let text = item['污染物类型'];
  5. if (text === '船舶垃圾') text = '0';
  6. if (text === '生活污水') text = '1';
  7. if (text === '含油污水') text = '2';
  8. let text2 = item['作业方式'];
  9. if (text2 === '垃圾自转运至处置') text2 = '0';
  10. if (text2 === '污水经管道运输至处置设备') text2 = '1';
  11. if (text2 === '补录接收') text2 = '2';
  12. if (text2 === '智能设备接收') text2 = '3';
  13. if (text2 === '扫车船码接收') text2 = '4';
  14. if (text2 === '扫码设备接收') text2 = '5';
  15. if (text2 === '预约接收') text2 = '6';
  16. if (text2 === '上岸即处理') text2 = '7';
  17. let text3 = item['转运状态'];
  18. if (text3 === '已转运') text3 = '0';
  19. if (text3 === '未转运') text3 = '1';
  20. if (text3 === '待受理') text3 = '2';
  21. if (text3 === '待确认') text3 = '3';
  22. newList.push({
  23. receiveNumbers: item['单号'],
  24. shipName: item['船名'],
  25. type: text,
  26. quantity: item['数量'],
  27. receiveCompany: item['接收单位'],
  28. taskCompany: item['作业单位'],
  29. taskTime: item['接收开始时间'],
  30. taskMode: text2,
  31. state: text3
  32. })
  33. })
  34. let newLists = newList.filter((item) => {
  35. return JSON.stringify(item) != "{}";
  36. });
  37. const params = id.split('-');
  38. updateDetails({
  39. taskFid: params[0],
  40. taskType: params[1],
  41. code: 1,
  42. data: {
  43. status: '1',
  44. list: [...newLists, ...list1, ...list2],
  45. }
  46. }).then(res => {
  47. if (res.code === '0') {
  48. message.success('上传成功')
  49. getList();
  50. handleRefresh();
  51. }
  52. })
  53. }
  54. }, [addDataList]);

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

展开全部

  • 写回答

1条回答 默认 最新

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

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

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

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部