如何读取 CSV 文件并插入每个 CSV 行答案

【问题标题】：How to read CSV file and insert that each CSV row如何读取 CSV 文件并插入每个 CSV 行
【发布时间】：2021-09-13 07:35:52
【问题描述】：

我正在使用 React js、Mobx 作为 .NET 核心的存储管理和 API 控制

用户必须选择 *.csv 文件并处理该文件，每一行都要插入 SQL Server。我正在努力将 CSV 数据从 UI 获取到 API

我在 React Js 中试过

 const loadData = (event: any) => {
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            var file = event.target.files[0];
            var reader = new FileReader();
           // reader.readAsDataURL(file);
            reader.onload = function (e) {
                console.log(e.target?.result);
                var csvData =  e.target?.result //This holding huge data         
                processCSVfile(csvData);
            };
            reader.readAsText(file);
            
            event.target.value = null;
        }
    }

在商店处理后，我尝试将整个数据传递给 API，这里我遇到了“请求 URL 太长”的问题

//Making api Get
//strData is holding whole CSV data
function getSampleCSV(strData: string) {
    console.log("csvTest", strData);      
    return requests.get(`/ControllerName/SampleMethod/csvSample/${strData}`);
}

【问题讨论】：

由于您将整个 .csv 文件放入 strData，它到底有多大？见：What is the maximum length of a URL in different browsers?
每个不同的网络浏览器的 URL 地址都有最大长度。 [不同浏览器中URL的最大长度是多少？ ](stackoverflow.com/questions/417142/…)。使用 URL 传递信息不适合这种情况。
在我的情况下，URL 长度是不可预测的，还有其他方法可以将数据从 UI 传递到 API 吗？

标签： javascript reactjs sql-server .net-core mobx

【解决方案1】：

无需将File读入内存，即可将数据上传到服务器，也无需在上传前将其转成json

更改服务器端点以接受接收原始数据的 POST 请求

const loadData = event => {
  fetch('/ControllerName/SampleMethod/csvSample', {
    method: 'POST',
    body: event.target.files[0]
  })
}

而且您不必检查 File、FileReader、FileList、Blob 是否都存在，所有现代浏览器现在都有它们当我们有新的读取方法（例如str = await blob.text()）时，FileReader 现在是一个遗留物

【讨论】：

【解决方案2】：

将 CSV 文件转换为 JSON 格式（以数组形式）并将其发送到 API。在 API 代码中为 Object[] 创建一个类并进行迭代。我推荐你使用“antd”和“react-excel-renderer”

import { Upload } from "antd";
import { ExcelRenderer } from "react-excel-renderer";

fileHandler = (fileList) => {
    //console.log("fileList", fileList);
    //let fileObj = fileList.target.files[0];
    let fileObj = fileList;
    if (!fileObj) {
      this.setState({
        errorMessage: "No file uploaded!",
      });
      return false;
    }
    //console.log("fileObj.type:", fileObj.type);
    if (
      !(
        fileObj.type === "application/vnd.ms-excel" ||
        fileObj.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
      )
    ) {
      this.setState({
        errorMessage: "Unknown file format. Only Excel files are uploaded!",
      });
      return false;
    }

    //just pass the fileObj as parameter
    ExcelRenderer(fileObj, (err, resp) => {
      if (err) {
        console.log(err);
        return false;
      } else {
        this.setState({
          dataLoaded: true,
          cols: resp.cols,
          rows: resp.rows,
        });
        //Modify your rows from excel/csv   
        this.exceldenGelenDegerleriYansit(resp.rows);
        return false;
      }
    });
    return false;
  };

.net core API 端应该是这样的

 public bool APIFunction(Object[] objects)
        {
            bool sonuc = false;

            using (var db = new WebApiContext())
            {
                using (var command = db.Database.GetDbConnection().CreateCommand())
                {
                    db.Database.OpenConnection();

                    foreach (Object item in objects)
                    {
                        ...
                        int result = (int)command.ExecuteScalar();
                        if (result > 0)
                        {
                            sonuc = true;
                        }
                        ...
                    }
                }
            }
            return sonuc;
        }

【讨论】：