excel文件夹上传.模板代码.

来源:src/components/UploadExcel/index.vue · 花裤衩/vue-element-admin - Gitee.comhttps://gitee.com/PanJiaChen/vue-element-admin/blob/master/src/components/UploadExcel/index.vue

1.定义一个vue.  样式根据个人情况修改.

<template>
  <div class="index">
    <input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
    <div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
      拖拽至此处上传
    </div>
    <div class="drop">
      <el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
        点击上传
      </el-button>
    </div>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  name: 'Index',
  props: {
    beforeUpload: Function, // eslint-disable-line
    onSuccess: Function// eslint-disable-line
  },
  data() {
    return {
      loading: false,
      excelData: {
        header: null,
        results: null
      }
    }
  },
  methods: {
    generateData({ header, results }) {
      this.excelData.header = header
      this.excelData.results = results
      this.onSuccess && this.onSuccess(this.excelData)
    },
    handleDrop(e) {
      e.stopPropagation()
      e.preventDefault()
      if (this.loading) return
      const files = e.dataTransfer.files
      if (files.length !== 1) {
        this.$message.error('Only support uploading one file!')
        return
      }
      const rawFile = files[0] // only use files[0]

      if (!this.isExcel(rawFile)) {
        this.$message.error('Only supports upload .xlsx, .xls, .csv suffix files')
        return false
      }
      this.upload(rawFile)
      e.stopPropagation()
      e.preventDefault()
    },
    handleDragover(e) {
      e.stopPropagation()
      e.preventDefault()
      e.dataTransfer.dropEffect = 'copy'
    },
    handleUpload() {
      this.$refs['excel-upload-input'].click()
    },
    handleClick(e) {
      const files = e.target.files
      const rawFile = files[0] // only use files[0]
      if (!rawFile) return
      this.upload(rawFile)
    },
    upload(rawFile) {
      this.$refs['excel-upload-input'].value = null // fix can't select the same excel

      if (!this.beforeUpload) {
        this.readerData(rawFile)
        return
      }
      const before = this.beforeUpload(rawFile)
      if (before) {
        this.readerData(rawFile)
      }
    },
    readerData(rawFile) {
      this.loading = true
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        reader.onload = e => {
          const data = e.target.result
          const workbook = XLSX.read(data, { type: 'array' })
          const firstSheetName = workbook.SheetNames[0]
          const worksheet = workbook.Sheets[firstSheetName]
          const header = this.getHeaderRow(worksheet)
          const results = XLSX.utils.sheet_to_json(worksheet)
          this.generateData({ header, results })
          this.loading = false
          resolve()
        }
        reader.readAsArrayBuffer(rawFile)
      })
    },
    getHeaderRow(sheet) {
      const headers = []
      const range = XLSX.utils.decode_range(sheet['!ref'])
      let C
      const R = range.s.r
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
        /* find the cell in the first row */
        let hdr = 'UNKNOWN ' + C // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        headers.push(hdr)
      }
      return headers
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name)
    }
  }
}
</script>

<style scoped>
.index{
  margin: 100px auto;
  display: flex;
  justify-content: center;
}
.excel-upload-input{
  display: none;
  z-index: -9999;
}
.drop{
  border: 2px dashed #bbb;
  width: 200px;
  height: 160px;
  line-height: 160px;
  font-size: 24px;
  border-radius: 5px;
  text-align: center;
  color: #bbb;
  position: relative;
}
</style>

 2.因为我在这里使用的是公共路由

在定义路由规则的同级中自定义一个公共页面.不占位置.

  {
    path: '/indexup',
    component: Layout,
    children: [
      {
        path: '',
        name: 'indexup',
        component: () => import('@/views/indexUp/indexUp.vue')
      }
    ]
  },

3.最后使用

<template>
  <div class="indexup">
    <el-card #header>
      <h3 style="text-align: center">{{ $route.query.name }}导入</h3><!-- 传值. -->
      <Index :before-upload="beforeUpload" :on-success="onSuccess" />
    </el-card>
  </div>
</template>

<script>
import { sysuserbatch } from '../../api/employees.js'
import Index from '../../api/index'
export default {
  components: {
    Index
  },
  methods: {
    beforeUpload() {
      return true
    },
    async onSuccess({ header, results }) {
      // 自定义规则.然后将中文转换成英文加密到新对象
      const obj = {
        入职日期: 'timeOfEntry',
        姓名: 'username',
        工号: 'workNumber',
        手机号: 'mobile',
        转正日期: 'correctionTime'
      }
      const arr = results.map((item) => {
        const newObj = {}
        // 将excel的时间转换成标准时间
        // excel:的时间计算是从1900年到相应的事件的天数. 从1开始计算. 时间是早上8点
        // js:的事件计算是从1970年开始. 从0开始计算. 时间从0开始
        Object.keys(item).forEach((item2) => {
          newObj[obj[item2]] = item[item2]
          // 判断有需要转换的时间时.满足下面代码
          if (obj[item2] === 'timeOfEntry' || obj[item2] === 'correctionTime') {
            newObj[obj[item2]] = this.chnageDate(item[item2])
          }
        })
        return newObj
      })
      console.log(header, results, arr, 333)
      // 这里时请求.调用api
      await sysuserbatch(arr)
      // 提示
      this.$message.success('导入成功')
      // 跳转
      this.$router.push('/employees')
    },
    // 定义事件转换的方式
    chnageDate(num) {
      // 转换时间戳
      // onst t = new Date((num - 1) * 24 * 60 * 60 * 1000 - 8 * 60 * 60 * 1000)
      const t = new Date((num - 9) * 24 * 60 * 60 * 1000)
      t.setYear(t.getFullYear() - 70)
      return t
    }
  }
}
</script>

<style lang="scss" scoped>
.indexup{
  padding: 20px
}
</style>