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

本文详细介绍了如何通过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>

 

<think>好的,用户的问题是关于ElementUIel-upload组件如何获取已选择的文件列表。我需要先回忆一下ElementUI的文档和相关API。 首先,用户提到想获取上传文件列表的方法。我记得el-upload组件有一个名为file-list的属性,用来存储当文件列表。不过用户问的是如何通过API方法获取这个列表,而不仅仅是绑定属性。可能需要使用组件实例的某些方法或直接访问属性。 查看引用内容,引用3提到需要手动上传时设置auto-upload为false,并使用http-request覆盖action。这种情况下,用户可能需要自己控制上传过程,这时候获取文件列表就很重要了。根据ElementUI的文档,el-upload组件提供了通过ref来访问内部方法的方式。例如,使用this.$refs.upload.uploadFiles可以获取到当文件列表数组。这应该就是用户需要的API方法。 另外,用户可能没有注意到需要通过ref来引用组件实例,所以需要在el-upload组件上设置ref属性,比如ref="upload"。然后在方法中通过this.$refs.upload来访问组件的方法和属性。例如,在提交表单的时候,可以通过this.$refs.upload.submit()来手动触发上传,同时也能通过this.$refs.upload.uploadFiles获取文件列表。 还要注意,文件列表中的每个对象可能有status属性,表示上传状态,比如'success'、'ready'等。用户可能需要根据这些状态进行过滤,例如只选择尚未上传文件进行提交。例如,使用filter方法筛选出status为'ready'的文件。 总结一下,步骤应该是:给el-upload设置ref,然后通过this.$refs.upload.uploadFiles获取列表。同时,在手动上传的情况下,可能需要处理上传文件过滤,确保只上传符合条件的文件。此外,还需要提醒用户确保正确绑定file-list属性,以便双向绑定更新。 最后,用户可能需要示例代码来具体实现,所以提供代码片段会更有帮助。比如在methods中定义handleUploadFile方法,并在提交时获取文件列表,过滤后上传。同时,提醒添加ref属性到组件标签上。</think>在ElementUI中,可以通过以下两种方式获取el-upload组件的已选择文件列表: ### 方法一:通过ref直接获取(推荐) 1. 给组件添加ref属性 ```html <el-upload ref="myUpload" :auto-upload="false"> <!-- 上传按钮 --> </el-upload> ``` 2. 通过组件实例访问文件列表 ```javascript // 获取所有文件对象(包含上传状态、文件名等信息) const fileList = this.$refs.myUpload.uploadFiles; // 获取原始File对象 const rawFiles = fileList.map(item => item.raw); ``` ### 方法二:双向绑定文件列表 1. 绑定file-list属性 ```html <el-upload :file-list="fileList" :auto-upload="false"> </el-upload> ``` 2. 在data中声明响应式数据 ```javascript data() { return { fileList: [] } } // 获取时直接访问this.fileList ``` ### 完整示例(手动上传场景) ```html <template> <el-upload ref="uploadRef" :auto-upload="false" :on-change="handleChange"> <el-button>选择文件</el-button> </el-upload> <el-button @click="submit">手动上传</el-button> </template> <script> export default { methods: { submit() { const files = this.$refs.uploadRef.uploadFiles const readyFiles = files.filter(f => f.status === 'ready') readyFiles.forEach(file => { const formData = new FormData() formData.append('file', file.raw) // 调用上传接口 uploadFileResource(formData) }) }, handleChange(file, fileList) { console.log('当文件列表:', fileList) } } } </script> ``` ### 关键说明: 1. `uploadFiles`属性包含完整的文件对象信息,包含以下关键属性: - `name`:文件- `size`:文件大小 - `status`:上传状态(ready/uploading/success/error) - `raw`:原始File对象 2. 当需要获取原始File对象时,应访问`file.raw`属性,这是浏览器原生的File对象[^3] 3. 在手动上传模式(auto-upload=false)下,建议配合on-change事件监听文件列表变化[^1] 4. 若需要清空文件列表,可以调用: ```javascript this.$refs.uploadRef.clearFiles() ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值