vue+antd上传组件（Upload）的简单案例

概要：使用antd的Upload组件自定义上传功能，包含上传、文件验证、回传（成功/失败）；

步入正题：

1、创建upoload.vue，编写demo代码：

<template>
  <a-modal
    v-model="visible"
    centered
    :mask-closable="false"
    :width="480"
    :footer="null"
    @cancel="hideModal"
  >
    <div class="outer">
      <div v-if="uploadStep==='upload'">
        <p class="uploadTitle">
          上传文件
        </p>
        <p>
          本地上传 Excel 文件
        </p>
        <p>
          不符合格式的Excel会导致上传失败
        </p>
        <a-upload
          name="file"
          :action="uploadUrl"
          :show-upload-list="false"
          @change="checkFile"
        >
          <a-button
            type="primary"
          >
            <a-icon type="upload" />上 传
          </a-button>
        </a-upload>
        <p>
          <span>或</span>
        </p>
        <a-button
          type="link"
          icon="download"
          @click="downloadTemplate"
        >
          下载模板
        </a-button>
      </div>
      <div v-if="uploadStep==='cover'">
        <img
          class="uploadIco1"
          src="@assets/images/waiting.png"
        >
        <p>
          请确认是否覆盖？
        </p>
        <p>
          点击“确定”继续上传，点击“取消”中断上传
        </p>
        <div>
          <a-button @click="handleRestart">
            取消
          </a-button>
          <a-button
            type="primary"
            @click="handleCover"
          >
            确定
          </a-button>
        </div>
      </div>
      <div v-if="uploadStep==='loading'">
        <a-icon
          type="loading"
          class="uploading"
        />
      </div>
      <div v-if="uploadStep==='success'">
        <img
          class="uploadIco1"
          src="@assets/images/success.png"
        >
        <div>
          上传成功！<br>正在自动跳转...
        </div>
        <div>
          跳转倒计时：{{ CountDown }}秒
        </div>
      </div>
      <div v-if="uploadStep==='fail'">
        <img
          class="uploadIco2"
          src="@assets/images/fail.png"
        >
        <p>
          {{ failMessage }}
        </p>
        <a-upload
          name="file"
          :action="uploadUrl"
          :show-upload-list="false"
          @change="checkFile"
        >
          <a-button type="primary">
            重新上传
          </a-button>
        </a-upload>
        <p>
          <span>或</span>
        </p>
        <a-button
          type="link"
          icon="download"
          @click="downloadTemplate"
        >
          下载模板
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

2、按需引入antd的组件，定义常量：

<script>
import Vue from 'vue'
import { Modal, Button, Icon, Upload } from 'ant-design-vue'

Vue.use(Modal)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Upload)

// 上传组件
export default {
  name: 'Upload',
  data() {
    return {
      visible: false,
      uploadStep: '',
      uploadUrl: '',
      failMessage: '',
      CountDown: '',
    }
  },
}

3、调用的方法以及交互逻辑代码（验证文件、是否覆盖已有文件、状态返回）

methods: {
    showModal(){
        this.visible = true;
        this.uploadStep = 'upload'
    },
    hideModal(){
        this.visible = false;
        // 为了体验效果，这里可以增加延时代码
        this.uploadStep = ''
    },
    // 点击下载模板
    downloadTemplate() {
      const a = document.createElement('a')
      a.href = 'url' //url=模版详细地址，此处仅用“url“代替详细地址的具体内容
      a.target = '_blank'
      a.click()
    },
    // 校验excel
    async checkFile(info) {
      // 符合返回成功和解析的json数据（二次上传），不符合返回报错信息，重新上传
      if (info.file.status === 'done') {
        const result = info.file.response
        if (!result.status) {
          this.failMessage = result.message
          this.uploadStep = 'fail'
        } else {
          if (!result.cover) {
            let timeout = null
            clearTimeout(timeout)
            this.uploadStep = 'loading'
            timeout = setTimeout(() => {
              this.upload()
            }, 1000)
          } else {
            this.uploadStep = 'cover'
          }
        }
      } else if (info.file.status === 'error') {
        // 网络异常报错
        this.failMessage = '网络错误'
        this.uploadStep = 'fail'
      }
    },
    // 校验通过，创建或覆盖原数据
    async upload() {
      try {
        await //此处增加接口请求，上传文档或数据
        // 上传成功 3秒倒计时 跳转
        this.uploadStep = 'success'
        const TIME_COUNT = 3
        this.CountDown = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.CountDown > 1 && this.CountDown <= TIME_COUNT) {
            this.CountDown--
          } else {
            clearInterval(this.timer)
            this.timer = null
            // 跳转的页面写在此处
            this.$router.replace({
                name: 'uploadFilesPage',
            })
          }
        }, 1000)
      } catch (error) {
        // 网络异常报错
        const msg = error.errorMessage || error.message || '网络错误'
        this.failMessage = msg
        this.uploadStep = 'fail'
      }
    },
    // 覆盖原文件
    handleCover() {
      let timeout = null
      clearTimeout(timeout)
      this.uploadStep = 'loading'
      timeout = setTimeout(() => {
        this.upload()
      }, 1000)
    },
    // 点击取消，返回伤处初始界面
    handleRestart() {
      this.uploadStep = 'upload'
    },

}

  本文是对upload组件的简单使用过程，代码拿来即用，希望能起到一个抛砖引玉的作用。感谢阅读！