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为表头