elementui-upload上传文件的封装

基于最近的项目封装了个基于elementUI的文件上传组件
文件上传组件：
data为需要传给后端的参数
headers传token

<template>
  <div class="v-UploadFile">
    <el-upload
      class="upload"
      accept=".xls, .xlsx"
      :data="params"
      :action="loadUrl"
      :headers="token"
      :show-file-list='false'
      :before-upload="beforeUploadEv"
      :on-success="uploadSuccessEv">
      <slot></slot>
    </el-upload>
    <UploadTip :dialogVisible="showUploadModal" :uploadMessage="uploadMessage" @closeUploadTip="closeUploadTip" />
  </div>
</template>

<script>
import UploadTip from '@/components/UploadTip'

export default {
  name: 'UploadFile',
  props: {
    loadUrl: {
      type: String,
      required: true
    },
    type: String,
    flag: String
  },
  data() {
    return {
      token: { 'Token': localStorage.getItem('Token') },
      params: { 'Token': localStorage.getItem('Token') },
      showUploadModal: false,
      uploadMessage: ''
    }
  },
  created() {
    this.params = this.type ? Object.assign(this.params, { type: this.type }) : this.params
    this.params = this.flag ? Object.assign(this.params, { flag: this.flag }) : this.params
  },
  methods: {
    beforeUploadEv(file) {
      this.$emit('uploadLoadingEv', true)
      let fileType = file.name.split('.')[1]
      if (fileType === 'xls' || fileType === 'xlsx') return file
      else {
        this.$emit('uploadLoadingEv', false)
        this.$message.error('上传文件只能是 xls/xlsx 格式!')
        return false
      }
    },
    uploadSuccessEv(res) {
      this.$emit('uploadLoadingEv', false)
      if (res.code === '200' || res.code === '405') {
        this.$emit('querySearchLink')
      }
      this.showUploadModal = true
      this.uploadMessage = res.message
    },
    closeUploadTip() {
      this.showUploadModal = false
      this.uploadMessage = ''
    }
  },
  components: {
    UploadTip
  }
}
</script>

<style scoped lang="less">
.v-UploadFile {
  display: inline-block;
}
</style>

组价的引用：

<UploadFile :loadUrl="$api.importMark" :flag="'3'" @querySearchLink="searchEv" @uploadLoadingEv="uploadLoadingEv">
   <el-button size="small" class="upload-btn">导入</el-button>
</UploadFile>
uploadLoadingEv(loading) {
      this.loading = loading
    }