在Drop事件中读取CSV文件中的数据

Question

我正在尝试在上传时读取CSV数据，但不是我无法获取数据。

我将数据放在'div'标签上而不是'input'标签上。

 onDrop = (e: React.DragEvent)=>{
        console.log("the value of event is ",e, e.dataTransfer.files);

        let files = e.dataTransfer.files; // FileList object

 // the value of files is 
 //lastModified: 1557969398000
 //lastModifiedDate: Thu May 16 2019 06:46:38 GMT+0530 (India Standard 
 //Time) {}
 //name: "2388278.csv"
 //size: 17934
 //type: "text/csv"
 //webkitRelativePath: ""

        let f = files[0];
        let reader = new FileReader();
        let output = reader.readAsText(f);
        console.log("output", output); // out put value id undefined

}

Answer 1

使用fileReader onload函数

• 通过fileReader.result访问文件内容
• 用\\n分割每一行
• 将每行内容拆分为,

完成上述操作后，您将获得一个数组，其中数组的每个元素对应于CSV文件中的一行。

这样，如果你有一个带有内容的users.csv文件

001,admin,admin.user@domain.com
002,user,user@domain.com

您将获得以下输出

[['001', 'admin', 'admin.user@domain.com'], ['002', 'user', 'user@domain.com']]

请尝试以下示例

const file = e.dataTransfer.files[0];
const fileReader = new FileReader();

fileReader.readAsText(file);

fileReader.onload = function() {
    const dataset = fileReader.result;

    const result = dataset.split('\n').map(data => data.split(','));

    console.log(result);
};