vue的ant design的下载模板和上传excel文件功能

 需要实现的功能需求，如下图所示：用户需要先下载模板，然后修改模板的内容，之后再上传excel文件。

<template>
  <a-card :bordered="false">
    <div class="contentWrap">
      <div class="table-operator" style="border-top: 5px">
        <a-button @click="handleAdd" type="primary" icon="plus">批量新增</a-button>
      </div>
    </div>
    <UploadModal ref="modalUpload" @ok="modalFormOk"></UploadModal>
  
  </a-card>
  
</template>

<script>
import UploadModal from '../components/UploadModal'

export default {
  name: '',
  components: { UploadModal },
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {},
  methods: {
    handleAdd() {
      this.$nextTick(() => {
        this.$refs.modalUpload.openUpload(1)
      })
    },
  },
}
</script>

<style scoped>
</style>

 

<template>
  <a-modal
    title="批量上传"
    :width="500"
    :visible="visible"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
    :footer="null"
  > 
    <div>
      注意：单次上传数量请勿超过200条。 
      <a-button type="link" @click="handleDownloadFile" icon="download"> 下载上传模板 </a-button>
    </div>
    <div class="down" style="margin-top: 10px;">
      <a-upload-dragger
        class="up_word"
        name="file"
        action="#"
        accept=".xlsx,.xls"
        :max-count="1"
        :multiple="false"
        :fileList="fileList"
        :before-upload="beforeUpload"
        @remove="handleRemove"
        @change="handleChange"
        @drop="handleDrop"
      >
        <!-- 
          -->
        <div class="up-text">
          <p class="ant-upload-drag-icon">
            <a-button type="link" icon="cloud-upload"></a-button>
          </p>
          <!-- <p class="ant-upload-text">点击上传文件</p> -->
          <p class="ant-upload-hint">点击选择要上传的EXCEL文件</p>
        </div>
      </a-upload-dragger>
​
      <div class="r_b" style="text-align:right;">
        <a-button style="margin-right: 10px" @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确认</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { axios } from '@/utils/request'

export default {
  name: 'UploadModal',
  components: {  },
  data() {
    return {
      visible: false,
      categoryType: null, // 1-包，2-模块，3-单体
      confirmLoading: false,
      fileList: [],
    }
  },
  created() {
  },
  methods: {
    openUpload(type) {
      this.visible = true
      this.categoryType = type
    },
    // 下载模板
    handleDownloadFile() {
      console.log(window)
      var a = document.createElement('a') // 创建一个<a></a>标签
      a.href = window.origin + "/baseData/电池信息导入模板.xlsx"         //重点（如测试发现下载文件不存在/找不到，检查路径）。
     //‘电池信息导入模板.xlsx’ 模板由后端人员放到服务器的 ‘baseData’文件夹里面，
      a.download = '信息导入模板'          // 设置下载文件文件名
      a.style.display = 'none'           // 隐藏a标签
      document.body.appendChild(a)       // 将a标签追加到文档对象中
      a.click()                          // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove()
    },

    handleRemove(file) {
      // console.log('handleRemove', file)
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      // console.log('beforeUpload', file)
      this.fileList = [...(this.fileList || []), file];
      //文件类型
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileName != 'xlsx' && fileName != 'xls') {
        this.$message.error('文件类型必须是xls或xlsx!')
        return false
      }
      // //读取文件大小
      // var fileSize = file.size
      // //console.log(fileSize)
      // if (fileSize > 1048576) {
      //   this.$message.error('文件大于1M!')
      //   return false
      // }
      // 在 处理完后 最后return false
      return false;
    },
    handleDrop(file) {
      // console.log('handleDrop', file);
    },
    handleChange(info) {
      // console.log('handleChange', info.file)
      if (this.fileList.length === 2) {
        const newFileList = this.fileList.slice();
        newFileList.splice(0, 1);
        this.fileList = newFileList;
      }
      // console.log(this.fileList.length);
      // 文件上传状态的控制
      const status = info.file.status;
      // console.log('status', status)
      if (status === "removed") {
        this.handleRemove(info.file)
      }
      // if (status !== "uploading") {
      //   console.log(info.file, info.fileList);
      // }
      // if (status === "done") {
      //   // message.success(`${info.file.name} 文件上传成功.`);
      // } else if (status === "error") {
      //   // message.error(`${info.file.name} 文件上传失败.`);
      // }
    },
    handleOk() {
      // console.log(this.fileList)
      let that = this
      // 组件含有的方法，获取文件的相关信息
      const formData = new FormData(); // 创建的对象，用于封装要上传的文件和其他需要传递的数据
      formData.append("file", that.fileList[0]);
      formData.append("category", that.categoryType); // 1-包，2-模块，3-单体
      // console.log(formData, that.fileList[0]);
      const config = {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: ACCESS_TOKEN, // 请求头中的授权信息
        },
      };
      axios({
        url:"jeccgApi"+"/sys/energy/batteryInfo/importExcel", 
        data: formData,
        method: 'post',
        headers: config.headers
      }).then(res=>{
        if (res.success) {
          that.$message.success(res.message)
          that.$emit('ok')
        } else {
          that.$message.warning(res.message)
        }
      })
      .finally(() => {
        that.confirmLoading = false
        that.handleCancel()
      })
    },
    handleCancel() {
      this.fileList = []
      this.visible = false
    },
  },
}
</script>

<style scoped>
</style>