将CSV文件从输入标签Vue js转换为JSON

Question

所以我尝试使用下面的模板和代码将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)

Answer 1

您需要等待使用事件目标文件加载文件内容:

async csvJSON(event) {
          const file = event.target.files.item(0)
           const csv = await file.text();
            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)
        },