ant design vue 文件上传

<template>

  <a-modal

    :visible="modalValue.visible"

    title="上传"

    width="38%"

    :maskClosable="false"

    @ok="handleOk"

    @cancel="handleCancel"

  >

      <a-upload-dragger

        accept=".csv"

        :multiple="false"

        action

        :before-upload="beforeUpload"

        :file-list="fileList"

      >

        <p class="ant-upload-drag-icon">

          <img style="width: 40px; height: 53px" src="@/assets/upload.png" />

        </p>

        <p class="ant-upload-text">点击或者拖拽导入文件进行上传</p>

        <p class="ant-upload-hint">

          (只支持csv文件，编码格式需为GB2312格式)

        </p>

      </a-upload-dragger>

  </a-modal>

</template>

<script>

import { uploadFile, downloadFile } from '@/api/searchoperation'

import downloader from 'downloadjs'

import { mapGetters } from 'vuex'

export default {

  props: {

    modalValue: {},

  },

  data() {

    return {

      fileList: [],

      data: {},

      name: '',

    }

  },

  computed: {

    ...mapGetters(['adcode']),

  },

  methods: {

    beforeUpload(file) {

      return new Promise((resolve, reject) => {

        let type = file.name.toLowerCase().substr(file.name.lastIndexOf('.'))

        if (type != '.csv') {

          this.$message.warning('请上传csv文件')

          return reject(false)

        }

        this.fileList = [...this.fileList, file].slice(0, 1)

        return false

      })

    },

    handleOk() {

      if (this.fileList.length == 0) {

        this.$message.warn('请上传文件')

        return

      } else {

        const that = this

        const fd = new FormData()

        this.fileList.forEach(file=>{

          fd.append('files', file)

        })

        fd.append('userName', JSON.parse(localStorage.getItem("pro__Login_Username")).value)

        uploadFile(fd).then((res) => {

          if (res.code == "200"||res.status == "0") {

            that.$message.success('上传成功')

            that.modalValue.visible = false

            that.$emit('updatetable')

          } else {

            that.$message.error(res.description||res.message)

          }

        })

        this.fileList = []

      }

    },

    handleCancel() {

      this.modalValue.visible = false

      this.fileList = []

    },

  },

}

</script>

<style>

</style>