上传文件 运用element-plus组件实现

 
        
            
                
            
            

                拖拽 xls/xlsx 文件到这里 或者 点击上传
            
        


        
            
            
        

data(){
    return {
        // excel 的数据
          tableData: []
     }
   methods: {
     uploadHandler(data) {
            // 这就是上传的那个文件
            const file = data.file
            console.log(file)
            // 创建一个文件读取的实例
            const reader = new FileReader()
            console.log(reader)
            // 读取成一个buffer格式的文件
            reader.readAsArrayBuffer(file)
            // 当onload执行的时候 文件已经读取完成
            reader.onload = async (e) => {
                const fileData = e.target.result
                console.log(e.target.result)
                // 利用XLSX对数据进行解析
                const workbook = await XLSX.read(fileData, { type: Array })
                console.log(workbook, "workbook")
                // 获取一张表的表名
                const sheetName = workbook.SheetNames[0]
                // 根据表名拿到表里面的内容
                const sheetData = workbook.Sheets[sheetName]
                // sheet_to_json解析成json
                const json = XLSX.utils.sheet_to_json(sheetData)
                console.log(json)
                this.tableData = json   //把json得到的数据给tableData
                console.log(this.tableData)
            }
        },

效果截图：