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

最新推荐文章于 2024-09-25 20:00:08 发布

要努力奋斗鸭

最新推荐文章于 2024-09-25 20:00:08 发布

阅读量1.8k

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_52512511/article/details/131355391

版权

该文章展示了如何在Vue.js应用中使用el-upload组件自定义上传处理函数http-request，结合FileReader读取文件为ArrayBuffer，然后用XLSX库解析Excel文件为JSON数据，最后将数据绑定到表格展示。

摘要由CSDN通过智能技术生成

 <!-- http-request覆盖默认的xhr行为，允许自行实现上传的请求 -->
        <el-upload class="upload-demo" drag accept=".xls,.xlsx" :http-request="uploadHandler" :show-file-list="false">
            <el-icon class="el-icon--upload">
                <upload-filled />
            </el-icon>
            <div class="el-upload__text">
                拖拽 xls/xlsx 文件到这里 或者 <em>点击上传</em>
            </div>
        </el-upload>


        <el-table :data="tableData" v-if="tableData.length">
            <el-table-column v-for="(value, key) in tableData[0]" :key="key" :prop="key" :label="key" align="center">
            </el-table-column>
        </el-table>

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)
            }
        },

效果截图：