Vue.js中input上传CSV转JSON报错：TypeError: csv.split is not a function

我尝试用Vue.js的input标签上传CSV文件并转换为JSON，代码如下：

<input type="file" ref="myfile" @change="csvJSON($event)" />

csvJSON(csv) {
    console.log(csv)
    var lines = csv.split('\n')

    var result = []

    var headers = lines[0].split(',')

    for (var i = 1; i < lines.length; i++) {
        var obj = {}
        var currentline = lines[i].split(',')

        for (var j = 0; j < headers.length; j++) {
            obj[headers[j]] = currentline[j]
        }

        result.push(obj)
    }
    console.log('data', result)
},

运行后一直出现如下错误：

TypeError: csv.split is not a function
    at VueComponent.csvJSON (Tables.vue?074c:179:1)
    at change (Tables.vue?8f4b:282:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:3015:1)
    at HTMLInputElement.invoker (vue.runtime.esm.js?2b0e:1813:1)
    at original_1._wrapper (vue.runtime.esm.js?2b0e:7458:1)

问题原因 #

你直接将change事件对象传给了csvJSON方法，但事件对象本身不是CSV文本内容，自然无法调用split方法。input上传文件时，文件内容需要通过FileReader API读取，而不是直接使用事件对象。

修正后的代码 #

保留原模板不变，修改csvJSON方法如下：

csvJSON(event) {
    // 获取上传的文件对象
    const file = event.target.files[0];
    if (!file) return;

    // 创建FileReader实例读取文件内容
    const reader = new FileReader();
    reader.onload = function(e) {
        // 读取完成后拿到CSV文本内容
        const csv = e.target.result;
        console.log(csv);
        
        var lines = csv.split('\n');
        var result = [];
        var headers = lines[0].split(',');

        for (var i = 1; i < lines.length; i++) {
            var obj = {};
            var currentline = lines[i].split(',');
            
            // 跳过空行，避免无效数据
            if (!currentline[0]) continue;

            for (var j = 0; j < headers.length; j++) {
                // 可选：trim()去除字段前后空格，优化数据格式
                obj[headers[j]] = currentline[j]?.trim();
            }
            result.push(obj);
        }
        console.log('data', result);
    };
    
    // 以纯文本形式读取文件
    reader.readAsText(file);
}

关键说明 #

• 从event.target.files[0]获取用户上传的CSV文件对象
• 使用FileReader的readAsText方法读取文件内容，读取完成后在onload回调中处理CSV文本
• 加入空行判断，避免处理文件末尾的空行导致异常
• 可选的trim()方法可以清理字段前后的空格，让转换后的JSON数据更规范

内容的提问来源于stack exchange，提问作者JS24