algorithm-platform-vue/src/views/modules/visi/com/static_upLoad_csv.vue

<template>
  <el-dialog title="数据上传"
             :visible.sync="st_upShow"
             v-if="st_upShow"
             width="60%"
             @close="closeHandle"
  >
    <div style="text-align: center">
      <el-upload
        class="upload-demo"
        drag
        :action="url"
        :data = "dataInfo"
        :limit= 1
        accept=".csv"
        :before-upload="beforeUploadHandle"
        :on-success="successHandle"
        :on-exceed = "upLoadNumberWrong">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">注意：目前仅支持 csv 文件,并且表头在第一行</div>
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="st_upShow = false">取 消</el-button>
    <el-button type="primary" @click="st_upShow = false">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import {info} from '../../../../mock/modules/sys-menu'
import { Message } from "element-ui"

export default {
  name: 'staticupLoadCsv',
  data () {
    return {
      st_upShow: false,
      info: '',
      url: this.$http.adornUrl(`/dataset/staticup/uploadcsv?token=${this.$cookie.get('Algtoken')}`),
      dataInfo: {
        id: this.$store.state.user.id
      }
    }
  },
  methods: {
    init (info) {
      this.st_upShow = true
      this.info = info
      console.log(info)
    },
    upLoadNumberWrong (files, fileList) {
      Message({
        message: '单次只允许上传一个文件',
        type: 'error'
      })
    },
    // 上传之前
    beforeUploadHandle (file) {
      console.log(file)
      if (file.type !== 'text/csv' && file.type !== 'xlsm' && file.type !== 'application/vnd.ms-excel') {
        Message.error('xls、xlsx、xlsm格式的excel数据！')
        return false
      }
    },
    // 上传成功
    successHandle (response, file, fileList) {
      this.fileList = fileList
      if (response && response.code === 0) {
        Message.success('文件上传成功')
        // console.log(response)
        this.info.isUp = true  // 标记已经上传过文件
        this.info.icon = this.info.icons[1] //  更换彩色图标
        this.info.upUrl = response.data.upUrl
        this.info.excelData = response.data.excelData  //  excel 数据
        this.info.fileName = response.data.fileName  //  文件名
        this.info.indexContent = response.data.fileName
        // for (var li = 0; li < excelDatalist.length; li++) {
        //   this.info.excelData.push(excelDatalist[li])
        // }

        for (var i = 0; i < response.data.columns.length; i++) {
          var list = {
            key: i,
            prop: response.data.columns[i],
            label: response.data.columns[i]
          }
          this.info.filedList.push(list)  //  存储表头数据
        }

        // console.log(response)
        this.time = setTimeout(() => {
          this.st_upShow = false
        }, 3000)
      } else {
        Message.error(response.msg)
      }
    },
    // 弹窗关闭时
    closeHandle () {
      // console.log(555)

      this.st_upShow = false
      this.fileList = []
      // this.$emit('refreshLocalUps', this.info)
      clearTimeout(this.time)
    }
  }
}
</script>

<style scoped>

</style>