element ui自定义上传:表单+批量导入excel数据

el-upload使用批量导入excel

:auto-upload="false"关闭自动上传，:data="iotDevice"携带表单数据一起通过导入excel数据传递给后端人员

<template>
  <div>
    <el-dialog title="标题" :visible.sync="dialogVisible" width="35%" @close="handleClose">
      <div class="upload-box">
        <el-form :model="iotDevice" status-icon :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="选择日期" prop="expireTime">
            <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="iotDevice.expireTime" align="center"
              :picker-options="expireTimeOption" placeholder="请选择日期" :clearable="false">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="批量导入EXCEL">
            <el-upload class="upload-demo" drag action="http://...域名" :limit="1" :before-upload="beforeupload"
              :on-success="uploadTemplatesuccess" :headers="dataform" :data="iotDevice" :disabled="diag"
              :auto-upload="false" :on-change="handleChange" ref="upload">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text" @click="uploadtext">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
            <div class="mt10px">
              <el-link type="primary" @click="uploadFile">下载模板</el-link>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="fileUp()" :loading="this.loading">{{ this.text }}</el-button>
        <el-button size="mini" @click="resetForm('ruleForm')">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

js逻辑如下(代码可直接使用 , 逻辑方面自己可看)，this.$refs.upload.submit()是后面主要的提交方式 ， 通过ref来实现

<script> 
import local from '@/utils/local'
var mytoken = local.get('token')
export default {
  // 写法1
  props: ['disalog'],
  data () {
    return {
      dialogVisible: false,
      rules: {
        expireTime: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      dataform: { Authorization: mytoken },
      iotDevice: {
        expireTime: '' // 日期
      },
      expireTimeOption: {
        disabledDate (date) {
          return date.getTime() <= Date.now()
        }
      },
      diag: true,
      filetemp: [],
      loading: false,
      text: '提交文件'
    }
  },
  methods: {
    handleClose () {
      // 子调父组件
      this.$emit('changeShow', 'batch') // 父组件关闭弹层
    },
    // 下载excel模板
    uploadFile () {
      window.open(
        'http://192.168.0.123:8080/iotplateform/template.xlsx',
        '_blank'
      )
    },
    // 转换日期格式
    formatTime (date) {
      var date = new Date(date)
      var YY = date.getFullYear()
      var MM =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      return YY + '-' + MM + '-' + DD
    },
    // 上文件前的钩子
    beforeupload (file) {
      this.iotDevice.expireTime = this.formatTime(this.iotDevice.expireTime)
    },
    uploadtext () {
      this.$refs.ruleForm.validate((valid) => {
        // 如果上述选择日期不为空 , 那么允许上传文件 , 否则禁止上传
        if (valid) {
          this.diag = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    fileUp () {
      if (this.filetemp.length > 0) {
        this.$refs.upload.submit()
        this.loading = true
        this.text = '提交中'
      } else {
        this.$message({
          type: 'info',
          message: '请先上传附件！'
        })
      }
    },
    // 上传excel
    uploadTemplatesuccess (res, file) {
      console.log(res, file, '文件上传成功')
      if (res.status == 0) {
        this.$message({
          type: 'success',
          message: res.msg
        })
      } else {
        this.$message.error(res.msg)
      }
      this.loading = false
      this.text = '提交文件'
    },
    // 选择第一个电子表格文件作为上传批量导入的数据
    handleChange (file, filelist) {
      console.log(file, filelist, '改变事件-------')
      if (file.status === 'ready') {
        if (filelist.length > 1) {
          filelist.splice(0, 1)
        }
        this.filetemp = filelist
      }
    },
    // 关闭
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$refs.upload.clearFiles()
      this.loading = false
      this.text = '提交文件'
      this.handleClose()
    },
  },
  watch: {
    disalog (oldVal, newVal) {
      this.loading = false
      this.text = '提交文件'
      this.dialogVisible = this.disalog
      if (this.disalog) {
        let date1 = new Date()
        date1.setTime(date1.getTime() + 2 * 365 * 24 * 3600000)
        this.iotDevice.expireTime = date1
      }
    }
  }
}
</script>