vue项目中使用element-ui实现excel表格上传

查看更多资源

1. 案例简介：

    vue-cli 搭建前端项目，并使用element-ui实现本地excel表格上传。

(1) 限制上传文件只能是 xls、xlsx格式；(2) 限制上传文件大小不能超过 2MB!

2. 案例图示：

3. 案例代码：

            
                
                    
                        
                    
                
            
            
                
                    
                        
                    
                
                
                    
                    选取文件
                    
                     
                
            
            
                
                    

                        取 消
                        确 定
                    
                
            
        

 

export default {
    data() {
        return {
            fileList:[],
            fileName:'', 
            newUploadForm:{
                password:'',
                fileName:''
            },
            formRules:{ // 表单 校验
                password:{required:true, trigger: 'blur',validator: validateFilePassword},
            },
        }
    },
    methods:{
        beforeUpload(file){ // 上传前 文件校验
            this.files = file;
            const extension = file.name.split('.')[1] === 'xls'
            const extension2 = file.name.split('.')[1] === 'xlsx'
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!extension && !extension2) {
              this.$message.warning('上传文件只能是 xls、xlsx格式!')
              return
            }
            if (!isLt2M) {
              this.$message.warning('上传文件大小不能超过 2MB!')
              return
            }
            this.fileName = file.name;
            return false // 返回false不会自动上传
      },
      submitUpload() { // 确认上传
        this.$refs['newUploadForm'].validate(valid => { // 是否通过 表单验证
            if(valid){
                if(this.fileName == ""){
                    this.$message({
                        message:'请选择要上传的文件！',
                        type:'warning',
                        showClose:true
                    })
                    return false;
                }

                let fileFormData = new FormData();
                fileFormData.append('file', this.files, this.fileName);  // 上传的文件
                fileFormData.append('period', this.newUploadForm.password); // 文件密码
                fileFormData.append('fileName', this.newUploadForm.fileName); // 文件名

                uploadEmployee(fileFormData).then(res => { // 上传请求
                    this.fileName = '';
                    // console.log(res)
                    if(res.code == 200){

                    }else{
                    }
                }).catch(err => {
                    this.fileName = '';
                    console.log('err')
                })
            }else{
                this.$message({
                    type:'warning',
                    message:'新增条件有误！',
                    showClose:true
                })
            }
        })
      },
      handleClose() {
          this.fileName = '';
      }
    }
}

// 上传接口  
export function uploadEmployee(params) {
    return request({
      url: '/apis/upload/uploadEmployee',
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data'
        },
      processData: false,
      data:params
    })
  }