<!-- excel文件上传 -->
<template>
  <el-dialog
    title="导入excel"
    :visible.sync="dialogShow"
    :before-close="handleClose"
    width="22%"
  >
    <div class="elUploadBox">
      <el-upload
        drag
        :limit="limitNum"
        :auto-upload="false"
        accept=".xlsx,.xls"
        list-type="multipart/form-data"
        :action="UploadUrl()"
        :before-upload="beforeUploadFile"
        :on-change="fileChange"
        :on-exceed="exceedFile"
        :on-success="handleSuccess"
        :on-error="handleError"
        :file-list="fileList"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传xlsx或xls文件，且不超过10M</div>
      </el-upload>
      <br>
      <el-button :loading="loading" size="small" type="primary" @click="uploadFile">立即上传</el-button>
      <el-button size="small" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
import { memberExcelAction } from '@/api/file'
export default {
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      limitNum: 1, // 上传excell时，同时允许上传的最大数
      fileList: [] // excel文件列表
    }
  },
  // 这个地方需要监听modalShow的变化,如果modalShow发生变化后,触发父组件对modal-show的更新
  watch: {
    dialogShow: function(val) {
      this.$emit('update:dialogShow', val)
    }
  },
  methods: {
    // 文件超出个数限制时的钩子
    exceedFile(files, fileList) {
      this.$message.warning(`只能选择 ${this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
    },
    // 文件状态改变时的钩子
    fileChange(file, fileList) {
      this.fileList = []
      this.fileList.push(file.raw)
    },
    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUploadFile(file) {
      const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
      const size = file.size / 1024 / 1024
      if (extension !== 'xlsx' || extension !== 'xls') {
        this.$message.warning('只能上传后缀是.xlsx或.xls的文件')
      }
      if (size > 10) {
        this.$message.warning('文件大小不得超过10M')
      }
    },
    // 文件上传成功时的钩子
    handleSuccess(res, file, fileList) {
      this.$message.success('文件上传成功')
    },
    // 文件上传失败时的钩子
    handleError(err, file, fileList) {
      this.$message.error('文件上传失败')
    },
    UploadUrl: function() {
    // 因为action参数是必填项，我们使用二次确认进行文件上传时，直接填上传文件的url会因为没有参数导致api报404，所以这里将action设置为一个返回为空的方法就行，避免抛错
      return ''
    },
  //主要方法
    uploadFile() {
      const that = this
      if (that.fileList.length === 0) {
        that.$message.warning('请上传文件')
      } else {
        // 将上传文件放在formdata类里面才能达到和包裹在form里面传输一样的效果
        const file = that.fileList[0]
        const param = new FormData()
        that.loading = true
        // 将得到的文件流添加到FormData对象
        param.append('file', file, file.name)
        memberExcelAction(param).then(response => {
          if (response.type === 'application/json') {
            // 将blob数据类型转换为json
            const reader = new FileReader()
            reader.readAsText(response, 'utf-8')
            reader.onload = function(e) {
              const readerres = reader.result
              const parseObj = JSON.parse(readerres)
              // 上传成功
              if (parseObj.status === '200') {
                that.$message({
                  message: '上传成功',
                  type: 'success'
                })
              } else if (parseObj.status === '-100') { // 上传失败
                that.$message.error(parseObj.data.data)
              }
            }
            that.loading = false
            that.handleClose()
          } else {
            // 下载返回的错误excel文件
            const blob = new Blob([response], { type: 'application/vnd.ms-excel' })// new Blob([res])中不加data就会返回下图中[objece objece]内容（少取一层）
            const fileName = 'error.xls'// 下载文件名称
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
            that.loading = false
            that.$message.error('表格内容错误，请修改！')
          }
        })
      }
    },
    handleClose(done) {
      const that = this
      that.dialogShow = false
      that.fileList = []
    }
  }
}
</script>
 
<style lang="scss">
  .elUploadBox{width: 95%;margin:0 auto;
    .el-upload{width:100%;}
    .el-upload-dragger{width:100%;}
  }
</style>

//request组件封装

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// import store from '@/store'
// import { getToken } from '@/utils/auth'
 
// create an axios instance
//http://member.chstpa.com/'
const service = axios.create({
  // baseURL: "https://www.chstpa.cn/", // url = base url + request url
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  // pro: true, // send cookies when cross-domain requests
  timeout: 600000 // request timeout
})
 
// request interceptor
service.interceptors.request.use(
  config => {
    // console.log(store.getters.token)
    // do something before request is sent
    // if (store.getters.token) {
    // let each request carry token
    // ['X-Token'] is a custom headers key
    // please modify it according to the actual situation
    const token = localStorage.getItem('Authorization')
    if (token) {
      config.headers['Authorization'] = token
      // config.headers['responseType'] = 'blob'
      // config.headers['responseType'] = 'arraybuffer'
      // config.responseType = 'arraybuffer'
      config.responseType = 'blob'
      // config.headers['Content-Type'] = 'application/json;charset=UTF-8'
      config.headers['Content-Type'] = 'application/json; application/octet-stream'
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
 
// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */
 
  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response
    console.log(res.err)
    // if the custom code is not 20000, it is judged as an error.
    if (res.status !== 200) {
      Message({
        message: res.desc || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      if (res.status === -1) {
        MessageBox.confirm('登录信息超时，请重新登录！', '登录超时', {
          confirmButtonText: '跳转到登录页面',
          cancelButtonText: '关闭',
          type: 'warning'
        }).then(() => {
          window.location.href = '#/login'
          // this.$router.push({ path: '/login' })
          // store.dispatch('user/resetToken').then(() => {
          //   location.reload()
          // })
        })
      }
 
      // this.$router.push({ path: '/login' })
 
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      // if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      //   // to re-login
      //   MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
      //     confirmButtonText: 'Re-Login',
      //     cancelButtonText: 'Cancel',
      //     type: 'warning'
      //   }).then(() => {
      //     // store.dispatch('user/resetToken').then(() => {
      //     //   location.reload()
      //     // })
      //   })
      // }
      return Promise.reject(new Error(res.err.msg || 'Error'))
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
 
export default service

//api管理

import request from '@/utils/requestBlob'
 
// 导入方法
export function memberExcelAction(data) {
  return request({
    url: '/member/memberExcel',
    method: 'post',
    data
  })
}