vue导入封装组件

封装组件/components/ImportFile/index.vue

<template>
  <el-dialog :visible.sync="open" :title="dialogTitle" width="60%">
    <div class="myDialogBox stand form-textarea-num">
      <div class="mb20">
        温馨提示：请先<span class="text-primary pointer" @click="downloadHandle">下载模板</span>，按要求填写后再上传
      </div>
      <div class="dia-content">
        <div class="dia-cont">
          <el-form label-width="90px">
            <el-form-item label="上传文件：">
              <input
                v-show="false"
                ref="UploadFile"
                type="file"
                @change="changeFile"
              />
              <div style="display: flex;">
                <div class="uploadbox" @click="chooseFile">
                  <i class="el-icon-plus"/>
                  上传文件
                </div>
                <span class="pl20">上传文件类型支持格式：.xls、xlsx</span>
              </div>
            </el-form-item>
            <el-form-item/>
          </el-form>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import path from 'path'

export default {
  name: 'ImportFile',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    toFormData: {
      type: Object,
      default: () => {}
    },
    uploadFun: {
      type: Function,
      default: () => () => {}
    },
    dialogTitle: {
      type: String,
      default: '导入'
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    open: {
      get() {
        return this.showDialog
      },
      set(val) {
        this.$emit('update:showDialog', val)
      }
    }
  },
  methods: {
    // 下载模板
    downloadHandle() {
      this.$emit('download')
    },
    chooseFile() {
      this.$refs.UploadFile.dispatchEvent(new MouseEvent('click'))
    },
    changeFile(e) {
      const file = e.target.files[0]
      const fileType = ['.xlsx', '.xls']
      const ext = path.extname(file.name)
      if (fileType.includes(ext)) {
        let formData = new FormData()
        formData.append('file', file)
        for (const i in this.toFormData) {
          formData.append(i, this.toFormData[i])
        }
        this.$emit('upload', [formData, uploadSuccess => {
          formData = null
          e.target.value = null
        }])
      } else {
        this.$message.warning('文件仅支持xlsx、xls格式上传')
        e.target.value = null
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.stand {
  .dia-content {
    .dia-title {
      padding-bottom: 10px;
      padding-left: 20px;
      font-weight: bold;
      color: #333;
    }

    .dia-cont {
      padding-top: 20px;

      .uploadbox {
        width: 200px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        cursor: pointer;
        border-radius: 3px;
      }
    }

    .btn-box {
      text-align: center;
      padding-top: 20px;

      > .el-button {
        width: 120px;
      }
    }
  }
}
</style>

下载文件utils/downloadFile.js

// 下载excel格式文件
export function downloadFile(data, fileName) {
  const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
  const downloadElement = document.createElement('a')
  // downloadElement.style.display = 'none';
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.setAttribute('download', `${fileName}.xlsx`)
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

// 下载pdf格式文件
export function downloadFilePDF(data, fileName) {
  const blob = new Blob([data], { type: 'application/pdf' })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.setAttribute('download', `${fileName}`)
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

// 下载bmp格式文件
export function downloadFileBMP(data, fileName) {
  const blob = new Blob([data], { type: 'application/bmp' })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.setAttribute('download', `${fileName}`)
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

使用组件

  <!--  导入  -->
    <import-file
      :show-dialog.sync="importDialog"
      :to-form-data="{project_id: proNodeId}"
      dialog-title="批量导入"
      @download="download"
      @upload="upload"
    />

   import ImportFile from '@/components/ImportFile'
   import { downloadFile } from '@/utils/downloadFile'

 components: { ImportFile }

    // 导入--下载模板
    download() {
      exportReport({
        export_name: 'RoomTemplate',
        filter_fieldThree: this.proNodeId
      })
        .then((res) => {
          const fileName = '列表模板' + getTimeStr()
          downloadFile(res.data, fileName)
        })
        .catch((err) => {
          this.$message.error(err.message || err.msg)
        })
    },
    // 导入--上传模板
    upload(data) {
      const uploadSuccess = data[1]
      ExportExcelImportRooms(data[0]).then((res) => {
        if (res.success) {
          this.$message.success('导入成功')
          this.loadData()
          this.importDialog = false
        } else {
          this.$message.error(res.msg || res.message)
        }
        uploadSuccess()
      }).catch((err) => {
        this.$message.error(err.msg || err.message)
        uploadSuccess()
      })
    },

api接口定义

// 导入列表
export function ExportExcelImportRooms(data) {
  return request({
    method: 'post',
    url: '/api/ExportExcel/ImportRooms',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

// 导出
export function exportReport(data) {
  return request({
    method: 'post',
    url: '/api/ExportExcel/Export',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json'
    },
    data
  })
}