element-上传exel文件使用

最新推荐文章于 2024-03-20 14:02:19 发布

原创最新推荐文章于 2024-03-20 14:02:19 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍如何使用Element UI组件库中的上传组件实现Excel文件(.xlsx)的上传功能，包括文件大小与格式限制、模板下载、文件预览及上传操作流程。文章强调了遵循模板格式的重要性，并提供了免责声明勾选项及导入按钮的实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-上传exel文件使用

案例展示

<template>
    <div class="all-l import">
        <el-row class="detail_shop_name panel-title">顾客导入</el-row>
<!--        <el-row class="import-btn">-->
<!--            <el-button type="primary">新建导入</el-button>-->
<!--        </el-row>-->
        <el-row class="import-file">
            <el-col :span="2">
                上传文件
            </el-col>
            <el-col :span="22">
                <div class="import-right-file">
                    <div class="file-select table_btn_add">
                        <el-upload
                                style="display:inline-block"
                                ref="uploadImport"
                                accept=".xlsx"
                                class="upload-demo"
                                :auto-upload="false"
                                 action="api/SC/Import"
                                :show-file-list="true"
                                :before-upload="beforeUpload"
                                :http-request="uploadSectionFile"
                                :limit="1"
                        >
                            <el-button  type="primary" size="small" icon="el-icon-top" style="display: inline-block">选择文件</el-button>
                        </el-upload>
                    </div>
                    <div class="file-desc">
                        当前仅支持.xlsx格式文件（文件大小在10M以内且行数在10万以内，若超出限制，请分批导入），
                        <br/>请使用Office 2010及以上版本，否则可能出现乱码。必须严格按照模板内容填入客户数据，否则可能会出现导入异常
                        <div class="file-down" @click="downloadFile">下载模板</div>
                    </div>
                    <div class="file-check">
                        <el-checkbox v-model="checked"></el-checkbox>
                        <div class="file-check-ty">我已阅读并同意</div>
                        <div class="file-check-mz" @click="dataImport">《数据导入免责声明》</div>
                    </div>
                    <div class="file-import-btn">
                        <el-button type="primary" @click="submitUpload">导入</el-button>
                        <el-button @click="cancelUpload">取消</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import  Url from '@/assets/url'
    export default {
        name: "import",
        data(){
            return{
                checked:true,
            }
        },methods:{
            downloadFile(){
                let params = {}
                if(localStorage.token) { params = JSON.parse(localStorage.token) }
                params.CompanyID = this.$store.state.currentCompany && this.$store.state.currentCompany.CompanyID
                params.LoginStaffID = this.$store.state.currentCompany && this.$store.state.currentCompany.StaffID
                this.axios.get(`${Url.SC}api/SC/GetCuxxxxx`, { params: params }).then((res) => {
                    window.open(res.data.Body)
                })
            },
            dataImport(){
                this.$router.push({path:'/sc/customer/'})
            },
            cancelUpload(){
                this.$refs.uploadImport.clearFiles()
            },
            beforeUpload(file){
                const isLt2M = file.size / 1024 / 1024 < 10
                if(!isLt2M){
                    this.$method.error('文件大小超过限制');
                    return false
                }
            },
            uploadSectionFile(param){
                var fileObj = param.file;
                var form = new FormData();
                form.append("file", fileObj);
                form.append("CompanyId", this.$store.state.currentCompany && this.$store.state.currentCompany.CompanyID);
                form.append("CreateUser", this.$store.state.currentCompany && this.$store.state.currentCompany.CreateUser);
                this.$axios.post(`${Url.SC}api/SC/Import`, form).then((res) => {
                     if( res.data && !res.Body){
                        this.$method.error(res.data.ResultMsg)
                     }else{
                         this.$method.message(res.data.ResultMsg)
                     }
                     this.$refs.uploadImport.clearFiles()
                })
            },
            submitUpload(){
                if(this.checked){
                    let list = document.getElementsByClassName('el-upload-list__item is-ready')
                    if(list.length == 0){
                        this.$message({
                        type:'warning',
                        message:"请选择需要导入的模板！"
                        })
                        return;
                    }
                    this.$refs.uploadImport.submit();
                }else{
                    this.$method.error('请勾选数据导入免责声明');
                    return
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .import {
        &.all-l {
            background-color: #fff;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 10px 20px rgba(200, 200, 200, 0.1);
        }
        .import-btn{
            margin-top: 20px;
        }
        .import-file{
            margin-top: 30px;
            padding: 50px 100px;
            border: 1px solid #ebebeb;
            .import-right-file{
                .file-select{
                    color: #1243CD;
                    cursor: pointer;
                }
                .file-desc{
                    margin-top: 10px;
                    line-height: 30px;
                    .file-down{
                        color: #1243CD;
                        cursor: pointer;
                    }
                }
                .file-check{
                    margin-top: 10px;
                    display: flex;
                    .file-check-ty{
                        padding-left: 10px;
                    }
                    .file-check-mz{
                        color: #1243CD;
                        cursor: pointer;
                        margin-left: 10px;
                    }
                }
                .file-import-btn{
                    margin-top: 10px;
                }
            }
        }
    }
</style>