elementui组件el-upload组件上传excel文件，手动上传excel文件，确认上传前有弹窗提示

本文链接：https://blog.youkuaiyun.com/Sunny_lxm/article/details/89312349

本文详细介绍了如何通过Excel文件批量导入用户的过程，包括选择文件、预览、上传限制、格式检查及二次确认等关键步骤，确保数据准确无误地导入系统。

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

点击取消后取消上传文件。点击确认手动上传成功

<template>
    <div>
        <h4>临时文件</h4>
        <el-table :data="groupList" style="width: 100%">
            <el-table-column prop="name" label="分组名称"></el-table-column>
            <el-table-column prop="total" label="用户数"></el-table-column>
            <el-table-column prop="remark" label="备注">
                <template slot-scope="scope">
                    <span v-if="scope.row.remark == ''||scope.row.remark == null">
                        -
                    </span>
                    <span v-if="scope.row.remark !='' || scope.row.remark != null">
                        {{scope.row.remark}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                       <el-upload class="upload-test" :action="uploadUrl()"
                            accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                            :limit="1"
                            :show-file-list = "false"
                            :file-list="fileList"
                            ref="upload"
                            :on-preview="handlePreview"
                            :on-exceed="exceedHander"
                            :before-upload="beforeAvatarUpload"
                            :auto-upload="false"
                            :on-change="testOnchange"
                            :before-remove="handleRemoveHook"
                            :on-success="handleSuccess">
                        <!-- <el-button size="small" v-if="fileList == ''">选取文件</el-button> -->
                        <span class="cur"  @click="importUser(scope.$index, scope.row)">导入用户</span>
                    </el-upload>
                </template>
            </el-table-column>
        </el-table>
        <!-- 导入用户 弹窗二次确认 -->
        <el-dialog title="导入Excel" :visible.sync="importUserDialog" width="550px"  :close-on-click-modal="false" :before-close="handleFirst1">
            <span v-if="fileList != ''" class="info-message">确认导入 “ {{fileList[0].name}} ” , oppenid相同会直接被覆盖</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleFirst1">取 消</el-button>
                <el-button type="primary" @click="handleConfimr">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
const request = require('superagent');
export default {
    data(){
        return{
            listId:'',
            fileList:[],
            importUserDialog:false,
            pageNum:1,
            pageSize:10,
            groupList:[],
        }
    },
    created(){
        // 获取会员列表
        // console.log(request)
       
    },
    mounted(){
        this.getVipList();
    },
    methods:{
        getVipList(){
            const that = this;
            request
                .get('/api')//获取数据接口
                .query({pageNum:that.pageNum})
                .query({pageSize:that.pageSize})
                .end(function(err,res){
                    if(err || !res.ok){
                        alert('oh on ! error')
                    }else{
                        // console.log(res)  
                        that.groupList = res.body.data.fieldList
                    }
                })
        },
        importUser(index,row){
            this.listId = row.id;
            // this.importUserDialog = true;
        }, 
        uploadUrl(){//动态改变上传地址
            return(
                "项目接口规定单词/" +  this.listId + "/接口规定单词" //接口拼接起来的this.listId为动态数据
            )
        },
        handlePreview(file){},
        exceedHander(){
            this.$message.warning('请勿上传多个文件')
    },
        beforeAvatarUpload(file){
            console.log('上传前');
            const Xls = file.name.split('.');
            const isLt2M = file.size / 1024 / 1024 < 10;
            console.log('1');
            if(Xls[1] === 'xls'|| Xls[1] === 'xlsx'){
                return file;
            }else{
                this.$message.error('上传文件只能是 xls/xlsx 格式')
                return false
            }
            if(!isLt2M){
                this.$message.error('上传模板大小不能超过 10MB')
                return false;
            }
        },
        // 文件状态改变
        testOnchange(file, fileList){
            this.fileList = fileList;
            if(this.fileList.length != 0){
                this.importUserDialog = true;
            }else{
                this.importUserDialog = false;
            }
        },
        handleRemoveHook(file,fileList){},
        handleConfimr(){ 
            this.$refs.upload.submit();
            this.importUserDialog = false;
        },
        handleSuccess(response, file, fileList){
            console.log('上传成功');
            if(response.code == 200){
                setTimeout(() =>{
                    this.$message.success('文件上传成功');
                    this.getVipList();
                },2000);
                fileList.splice(0);//上传成功后将fileList清空，不影响下一次上传
            }else{
                this.$message.error(response.message)
            }
        },  
        handleFirst1(){
            this.fileList.splice(0);
            this.importUserDialog = false;
            this.$message.info('已取消上传');
        },
    }
}
</script>