自定义导入弹框

导入文件或者批量导入文件时，可以自定义导入弹框，里面包含下载导入模板、选择文件等功能。

1.导入弹框结构

<el-dialog title="导入" :visible.sync="importFormVisible" width="600px" center :before-close="closeImport">
  <el-form :model="importForm" ref="importForm" class="leftForm upform">
    <el-form-item label="">
      <el-button type="primary" @click="downloadTemplate()">下载Excel模板</el-button>
    </el-form-item>
    <el-form-item prop="filename"
                  :rules="[{ required: true, message: '请选择文件', trigger: 'blur' }]">
      <el-input v-model="importForm.filename" disabled style="width: 300px"></el-input>
      <el-button icon="el-icon-upload"  style="float: right" type="primary" @click="importFile()">上传</el-button>
      <div class="upLoadBtnDiv" style="width: 15%; float: right; margin-right: 10px">
        <input class="upLoadBtn" @change="selectFile" type="file" placeholder="请输入选择文件" ref="fileInput">
        <span>选择</span>
      </div>
    </el-form-item>
  </el-form>
</el-dialog>

2.下载模板（导出文件）

downloadTemplate() {
	this.axios.post(url, {retype: 0}, {responseType: 'arraybuffer'}).then(res => {
      if (res.data.success === false) {
        this.$message({
          type: 'error',
          message: res.data.msg
        })
      } else {
        let contentDisposition = res.headers['content-disposition']
        let fileName = decodeURI(contentDisposition.split('=')[1])
        console.log(fileName)
        let blob = new Blob([res.data], {type: 'application/octet-stream'})
        if (window.navigator.msSaveOrOpenBlob) { // msSaveOrOpenBlob方法返回bool值
          navigator.msSaveBlob(blob, fileName)// 本地保存
        } else {
          let link = document.createElement('a') // a标签下载
          link.href = window.URL.createObjectURL(blob)
          link.download = fileName
          link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))
          window.URL.revokeObjectURL(link.href)
        }
      }
      this.isLoading = false
    }).catch(err => {
      console.log('下载模板出错', err)
      this.isLoading = false
    })
 },

3.选择文件

这里处理选择需要上传的文件之后，对文件的类型、大小等做限制。在第一次上传之后，再点击上传同一个文件的时候，不会触发change函数，所以在上传文件之后清空一下上一次缓存，也就是这一段代码：this.$refs[‘fileInput’].value = ‘’;

selectFile(e) {
  let tempFile = e.target.files[0];
  if (tempFile === undefined || tempFile === '') {
    return false
  }
  this.importForm.file = tempFile;
  this.importForm.filename = tempFile.name;
  if (tempFile.type) {
    let fileType = tempFile.type;
    if (fileType === 'application/vnd.ms-excel') {
    } else {
      this.$message({
        type: 'warning',
        message: '文件格式为excel'
      })
      return false
    }
  } else {
    let fileType = this.importForm.filename.substring(this.importForm.filename.name.lastIndexOf('.') + 1);
    const extension = fileType === 'xls';
    const extension2 = fileType === 'xlsx';
    if (!extension && !extension2) {
      this.$message({
        type: 'warning',
        message: '文件格式为excel'
      })
      return false;
    }
  }
  // if (fileSize < 500) {
  // } else {
  //   this.$message({
  //     type: 'warning',
  //     message: '图片大小不能超过500k'
  //   })
  //   return false
  // }
  this.importForm.file = tempFile;
  this.importForm.filename = tempFile.name;
  // this.$forceUpdate(); // 强制刷新数据
  this.$message({
    type: 'success',
    message: '上传"' + tempFile.name + '"成功'
  })
  this.$refs['fileInput'].value = '';
 }

4.导入提交

importFile() {
  this.$refs['importForm'].validate((valid) => {
    if (valid) {
      let formData = new FormData();
      formData.append('file', this.importForm.file); // 文件流
      this.axios.post(url, formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {
        if (res.data.success === false) {
          this.$message({
            type: 'error',
            message: res.data.msg
          })
        } else {
          this.$refs['importForm'].resetFields();
          this.importFormVisible = false;
          this.$message({
            type: 'success',
            message: '导入成功'
          })
        }
      }).catch(err => {
        console.log('导入出错', err)
      })
    } else {
      this.$message({
        type: 'error',
        message: '提交格式错误'
      })
    }
  })
}