csv文件的上传、解析和获得最后的数据

前端和node端解析、读取csv文件的区别

1、前端

运行环境为浏览器，受到浏览器安全策略的限制，例如跨域请求、文件访问权限等。
对于大型CSV文件的处理可能会受到性能瓶颈的影响。
前端运行在用户的浏览器中，受到浏览器安全策略的限制，无法直接访问用户文件系统以进行写入操作

2、node端

运行环境为服务器端的Node.js，具有更高的权限和更广泛的文件系统访问能力。
上传的文件通常存储在服务器的临时目录或指定目录中，然后使用Node.js的文件系统模块或第三方库进行读取和解析
可以使用流式处理（streaming）技术来逐行读取、解析、CSV文件内容，还可以写入、删除某个文件，权限更丰富。

需求：前端上传某个csv文件，并读取csv文件的数据（不需要写入，读取即可）

第三方库：papaparse

<template>
  <div class="main"  >
     <input  class="upload" type="file" @change="onFileChange" accept=".csv" />
  </div>
</template>

<script lang="ts" setup>
import Papa from 'papaparse';
const csvData = ref([]); //读取出来的csv文件
const csvHeaders = ref([]);//csv文件头部
/**
 * 解析csv文件
 * @param event 
 */
 const onFileChange = (event: Event) => {
      const fileInput = event.target as HTMLInputElement;
      const file = fileInput.files?.item(0);
      if (file && file.type === 'text/csv') {
        const reader = new FileReader();
        reader.onload = (e) => {
          const result = (e.target as FileReader).result as string;
          Papa.parse(result, {
            header: true,
            complete: (parsedData) => {
              csvHeaders.value = parsedData.meta.fields;
              csvData.value = parsedData.data;
              //处理csv文件的数据
              processPhoneId(csvData.value)
            },
            error: (err) => {
              console.error('解析文件错误', err);
            },
          });
        };
        reader.readAsText(file);
      } else {
        alert('请上传正确的CSV格式文件！');
      }
};

let totalPhoneIds=ref([]) //处理csv文件后得到的所有phoneId，会直接传递给后端
/**
 * 处理csv数据，传递给后端
 * @param data 传入的csvData文件
 */
function processPhoneId(data) {
  // 获取csv文件中所有的phoneId，组成数据，同时过滤空字符串
  totalPhoneIds.value = data
    .map(item => item.phoneId) 
    .filter(phoneId => phoneId.trim() !== ''); 
}

</script>

上传的csv文件格式如下 phoneId为表头