vue 弹框组件封装, excel,xlsx,xls 多文件上传

 

一. 为什么要使用弹框

  在一个页面当中,通常会因为各种要展示数据填满了用户视图(view),当前界面会显的寸土寸金,或者当前界面需要新增一个小的功能而不需要重新增加页面,造成代码冗余,如此一来弹框就派上了用场了!

二.新建一个upload.vue 文件 在父组件内部去引入这个文件(单文件上传)

<template>
  <el-dialog
    title="上传文件"
    :close-on-click-modal="false"
    @close="closeHandle"
    :visible.sync="commonUploadvisible"
  >
  
     /* 
    accept 认证的文件类型 这里的multiple 一般关掉,多选的时候是一个一个上传的
    会发送多个请求 如果文件依次上传的过多会造成服务器,会给公司服务器造成过多的负荷,
    当然也可以使用limit 属性去限制数量,不过我个人不建议使用
    } */
    <el-upload
      drag
       accept=""
      :action="url"
      :before-upload="beforeUploadHandle"
      :on-success="successHandle"
      :headers="headers"
      :data="{ namespace: classifyUploadFlag.namespace}"
      :multiple="false"
      :file-list="fileList"
      style="text-align: center"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只支持.xlsx. xls格式的文件！</div>
    </el-upload>
  </el-dialog>
</template>

<script>
import local from '@/local/loacl'
export default {
  data() {
    return {
      commonUploadvisible: false,
     // 父组件传递过来的 url 
      url: uploadUrl || this.HOST + '/dict/class