<template> <el-card class="box-card"> <h2 style="margin-bottom: 20px;">element-ui导入Excel文件</h2> <el-upload multiple action="fileUrl" :limit="limitNum" accept=".xls,.xlsx,csv" :file-list="fileList" :before-upload="beforeUpload" :on-exceed="onExceed" :on-success="onSuccess" :show-file-list="showFileList" :http-request="uploadFile"> <el-button type="primary">导入</el-button> </el-upload> </el-card> </template> <script> export default { data() { return { fileUrl: '', //上传文件的域名地址 limitNum: 3, //文件上传个数限制 fileList: [], //文件列表 showFileList: false //文件列表是否显示,默认不显示 }; }, methods: { // 文件上传类型 // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet --- 后缀为 .xlsx // application/vnd.ms-excel --- 后缀为 .xls或.csv //文件上传之前的钩子,可以做一些验证或限制 beforeUpload(file) { console.log('beforeUpload', file); let regExp = file.name.replace(/.+\./, ''); let lower = regExp.toLowerCase(); //把大写字符串全部转为小写字符串 let suffix = ['xls', 'xlsx']; if (suffix.indexOf(lower) === -1) { return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !'); } let isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { return this.$message.error('请上传文件大小不能超过 2MB 的附件 !'); } }, //导入表格格式校验,后端已做验证,这个暂时不需要 // beforeUpload(file) { // // let regExp = file.name.replace(/.+\./, ''); // // let suffix = ['xls', 'xlsx']; // // if (suffix.indexOf(regExp.toLowerCase()) === -1) { // // return this.$message.warning('请上传后缀名为 xls、xlsx 的附件 !'); // // } // }, //文件超出个数限制时的钩子 onExceed(files, fileList) { console.log('onExceed-files', files); console.log('onExceed-fileList', fileList); return this.$message.warning(`只能选择${this.limitNum}个文件,当前共选择了${files.length+fileList.length}个`) }, //文件上传成功时的钩子 onSuccess(response, file, fileList) { console.log('onSuccess', response); console.log('onSuccess', file); console.log('onSuccess', response); }, //覆盖默认的上传行为,可以自定义上传的实现 uploadFile(item) { console.log('uploadFile', item); let formData = new FormData(); formData.append('token', 'hgjjdsjj655756'); formData.append('file', item.file); formData.append('file_name', item.file.name); //请求接口 // this.$axios.post(formData).then((res) => {}) } } } </script> <style> </style>
element-ui导入Excel文件
原文作者:前端报刊
原文地址: https://blog.csdn.net/qq_36995521/article/details/119068217
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
原文地址: https://blog.csdn.net/qq_36995521/article/details/119068217
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。