📃 关于怎么用NodeJs去处理前端的文件数据

🌰 ：有这么一个需求，前端需要上传一个csv文件【编码格式不定】，然后读取文件的内容再去处理
✏️ ：因为文件的编码格式不定，如果前端直接处理的话，会有乱码的情况【表格软件不同，编码类型是有差异的，你取到的甚至会是韩文】，所以需要先把需要处理的文件用nodejs去接收，再把处理完的数据返回给前端去操作，确保数据的准确性和统一性。

需要用到的插件

• co-busboy - www.npmjs.com/package/co-… 【处理multipart数据】
• chardet - www.npmjs.com/package/cha… 【检测数据可能的编码类型】
• iconv-lite - www.npmjs.com/package/ico… 【转换数据编码类型为UTF-8】

一、怎么把文件弄到NodeJs ？

在前端直接用file 类型的input标签去获取文件数据

• 定义相关的标签

<input id="file" type="file" name="file"></input>
<button id="btn">上传</button>

• 获取文件数据后直接发送给Node端处理

const oBtn = document.querySelector('#btn');
const oFile = document.querySelector('#file');

oBtn.onclick = function() {
  const file = oFile.files[0];
  const formData = new FormData();
  formData.append('some title', file);

  let xhr = new XMLHttpRequest();
  xhr.onload = function() {
    console.log('上传成功');
  }

  xhr.open('post', '/api/data', true);
  
  // 注意这里不需要自己设置 content-type头，否则会丢失 boundary数据导致错误
  // xhr.setRequestHeader('Content-Type', 'multipart/form-data'); 
  
  xhr.send(formData);
}

在Node端，接收数据并使用co-busboy插件处理拿到的data

• 我这里的Node端是使用Koa去启动服务的，其他的类似处理

// 监听路由
router.post('/api/data', dealData);

-----------------------------------------------------------------

// 处理函数，把数据保存到某个目录下
const parse = require('co-busboy');
const fs = require('fs');
const path = require('path');
const sendToWormhole = require('stream-wormhole');

async function dealData(ctx, next) {
    const saveFile = function(ctx) {
    	return new Promise(async (resolve, reject) => {
            const stream = await parse(ctx)();
            const fileName = stream.filename;
            const filePath = path.join(__dirname, 'csv', fileName);
            const ws = fs.createWriteStream(filePath);

            ws.on('finish', () => {
              console.log(`保存文件成功: 路径为${filePath}`);
              resolve({ filePath, fileName, stream });
            })

            stream.pipe(ws);
        })
    }
    
    const unlinkFile = filepath => {
    	fs.unlink(filePath, (err) => {
            console.log(`${filePath} 文件已经删除`);
        });
    }
    
    try {
    	const { filePath, fileName, stream } = await saveFile(ctx);
    	// TODO:处理文件数据
    } catch(e) {
    	// 将 stream 消耗掉 
    	await sendToWormhole(stream);
    } finally {
    	unlinkFile(filepath);
    }
    
}

通过以上操作，就可以把前端上传的文件保存到服务器的指定地方，下面要做的就是把文件的数据处理成统一格式并返回。

二、怎么把文件的数据处理成统一格式 ？

这个我写过一篇文章 juejin.cn/post/686434…