基于ElementUI的Upload 上传组件封装适用于项目的ExcelUpload.vue组件

产品需求：

1. 因为是批量上传故前端只需要将文件传到后端即可；
2. 上传成功之后需要将数据报存到商品ID组件中，且用表格形式进行展示，如下图一；
3. 上传成功之后需有弹框展示上传成功的总个数，若有失败商品ID,则需将失败商品ID展示（只需展示失败的前100个），且失败的商品id支持按钮复制功能，如下图二；

图一：

图二：

组件代码：

需求完成设计：

1. 上传功能：

            上传xls、xlsx格式文件
        

使用的是ElementUI的upload组件：这里对本组件所用到的属性进行一些解释，如读者们对Upload组件不解，可先去官网查阅文档之后再看本文。

• action：
  
• limit:
  
• show-file-list：
  
• before-upload：
  
• http-request：
  
  关于上传功能的js实现介绍：
• 上传之前的文件类型，大小的判断

beforeUpload(file){
            this.file = file;
            const extension = file.name.split('.')[1] === 'xls';
            const extension2 = file.name.split('.')[1] === 'xlsx';
            const isLt5M = file.size / 1024 / 1024 < 5;
            if (!extension && !extension2) {
                this.$message.warning('上传模板只能是 xls、xlsx格式!');
                return false;
            }
            if (!isLt5M) {
                this.$message.warning('上传模板大小不能超过 5MB!');
                return false;
            }
            this.fileName = file.name;
            return true;
        },

• 上传时需要做的处理

async submitUpload(options) {
            const fd = new FormData();
            fd.append('file', options.file);
            const config = {
                headers:{ 'Content-Type':'multipart/form-data' }
            };
            try {
                const url = await this.$request.post(this.action, fd, config);
                this.dialogVisible = true;
                this.failedCnt = url.failedCnt;
                this.totalCnt = url.totalCnt;
                this.successCnt = url.successCnt;
                this.failedIdList = url.failedIdList;
                this.successRecordList = url.successRecordList;
                this.$emit('uploadSuccess', this.successRecordList.map(item => item.brandId).join(','));
                this.$emit('input', this.successRecordList);
            }catch(error){
                this.$notify.error(error.desc || '上传失败');
            } finally {
                this.$refs.upload.clearFiles();
            }
        },

2.上传成功之后，信息的展示以及错误id的复制功能实现

信息使用弹窗的形式，使用ElementUI的Dialog 对话框组件实现，Dialog 对话框组件详情请查阅官网。

• 功能实现HTML代码：因为只有有失败ID的情况下才需展示失败id列表以及复制粘贴错误id功能，可以根据接口返回的失败的id数组的长度以及v-if、v-else来实现

            {{this.totalCnt}}个商品id全部上传成功！
            

                
                    {{this.successCnt}}
                    个商品id上传成功！
                
                

                    以下共
                    {{this.failedCnt}}
                    个商品id校验不通过：
                    复制错误id
                
                

                    
                    
                        ...
                    
                
            
            
                确定并保存
            
        

• 复制错误id功能实现：使用了插件，vue-clipboard2；this.$copyText为插件自身方法，如有不解请自行官网阅读（https://www.npmjs.com/package/vue-clipboard2）；
• 关于vue-clipboard2用法：官网有两种使用方法，本文选用的为第二种，个人觉得更加的清晰明了；

doCopy () {
            try{
                this.$copyText(this.failedIdList);
                this.$notify.success('复制成功，请记得粘贴!');
            }catch(error){
                this.$notify.error('复制失败！');
            }
        }

3.将上传成功的数据传给商品ID组件，且已表格的形式展示出来，这里的关键点就涉及到父子组件传值的问题啦

• 在submitUpload上传函数完成时，代码里有this.$emit(‘input’, this.successRecordList);，功能及为将接口返回的上传成功的数据传给父组件里。

• 在父组件商品ID组件里，只需监听对应的ExcelUpload.vue上的input事件传递过来的值做对应处理即可。

• 父组件里ExcelUpload.vue的代码，@input="handleUploadSuccess”的handleUploadSuccess函数即实现传值功能；

• handleUploadSuccess函数，商品ID组件使用的表格也为ElementUI的table表格

handleUploadSuccess(goodsIdList) {
            goodsIdList.forEach(item => {
                this.value.push(item.goodsId);
                this.tableData.push(item);
            });

            if(this.value.length > 0) {
                this.checkSuccess = true;
            } else {
                this.checkSuccess = false;
            }
            this.elForm.validateField(this.$refs.formItem);
        },

标题本组件到此就结束啦，宝贝儿子美图镇楼结束，祝各位工作学习都愉快~~