Ant Design Vue 通过点击提交按钮后开始上传

<template>
  <a-modal
    :width="700"
    :visible="visible"
    :confirm-loading="loading"
    :ok-text="$t('modal.okText')"
    :cancel-text="$t('modal.cancelText')"
    destroy-on-close
    @ok="handleSubmit"
    @cancel="cancel">
    <div slot="title">
      {{ $t('project-manager.pro-info-manager.project-home.uploadMaterials') }}
    </div>
    <div>{{ $t('project-manager.pro-info-manager.project-home.enclosure') }}</div>
    <a-upload-dragger
      name="file"
      :multiple="true"
      :file-list="fileList"
      :headers="uploadHeaders"
      :action="uploadAction"
      :show-upload-list="false"
      :before-upload="beforeUpload"
      @change="fileStatusChangeFn"
      :data="params">
      <div style="display: flex; align-items: center; padding: 0 20px">
        <div class="upload-icon">
          <img class="w-20px h-20px" src="@/assets/attachment.png" />
        </div>
        <p class="upload-word">
          {{
            $t('project-manager.pro-info-manager.project-home.dragAttachmentsToThisArea')
          }}
          <span class="high-light">{{ $t('upload.file') }}</span>
        </p>
        <p class="upload-remark">
          {{
            $t(
              'project-manager.pro-info-manager.project-home.attachmentSizeCannotExceed_100M'
            )
          }}
        </p>
      </div>
    </a-upload-dragger>

    <div v-for="(fileItem, index) in fileList" :key="index" class="item">
      <div class="p-l-10px parentPos">
        <img class="w-36px h-44px" src="@/assets/Rectangle.png" />
        <span class="posType" style="background: #29da6b">
          {{ filterName(fileItem.name).toUpperCase() }}
        </span>
      </div>
      <div class="flex justify-between h-60px w-100% items-center bg-color">
        <div class="info">
          <div>{{ fileItem.name }}</div>
          <div class="size">{{ conversion(fileItem.size, { decimalCount: 0 }) }}</div>
        </div>
        <div class="flex">
          <icon-font
            type="icon-shanchu1"
            class="m-r-15px"
            @click="deleteFile(index)"></icon-font>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import storage from 'store';
import { ACCESS_TOKEN } from '@/store/mutation-types';
import { conversion } from '@/utils/util';

export default {
  name: 'ImportExcelSchedule',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    projectId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      fileList: [],
      uploadAction: '/api/project-manage/libFile/upload',
      params: {
        businessId: this.projectId
      },
      uploadHeaders: {
        [ACCESS_TOKEN]: storage.get(ACCESS_TOKEN)
      },
      loading: false
    };
  },
  methods: {
    conversion: conversion,
    // 过滤
    filterName(name) {
      return name.substring(name.lastIndexOf('.') + 1);
    },
    beforeUpload(info, fileList) {
      if (info.size / 1024 / 1024 > 100) {
        for (let i = 0; i < fileList.length; ) {
          if (fileList[i].uid == info.uid) {
            fileList.splice(i, 1);
          } else {
            i++;
          }
        }
        this.$message.error('附件大小不能超过100M');
        return false;
      }
      this.fileList = fileList;
      return new Promise((resolve, reject) => {
        info.resolveFn = resolve;
        info.rejectFn = reject;
      });
    },
    fileStatusChangeFn({ file, fileList }) {
      this.fileList = fileList;
      if (file.status == 'done') {
        this.fileList = this.fileList.filter(item => item.uid != file.uid);
        if (!this.fileList.length) {
          this.loading = false;
          this.$message.success(`共享资料上传成功.`);
          this.$emit('update:visible', false);
          this.$emit('uploadSuccess');
        }
      } else if (status === 'error') {
        this.fileList = this.fileList.filter(item => item.uid != file.uid);
        if (!this.fileList.length) {
          this.loading = false;

          this.$emit('update:visible', false);
          this.$emit('uploadSuccess');
        }
        this.$message.error(`共享资料上传失败`);
      }
    },
    deleteFile(index) {
      this.fileList.splice(index, 1);
    },
    handleSubmit() {
      if (!this.fileList.length) {
        this.$emit('update:visible', false);
        return;
      }
      this.loading = true;
      for (let i = 0; i < this.fileList.length; i++) {
        this.fileList[i].resolveFn();
      }
    },
    cancel() {
      if (!this.loading) {
        this.$emit('update:visible', false);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.dimension-tag {
  padding: 1px 4px;
  background: #45ba5f;
  border-radius: 2px;
  font-size: 10px;
  color: #fff;
  margin-left: 6px;
}
.upload-word {
  margin-left: 15px;
  font-size: 14px;
  color: rgba(49, 55, 61, 1);
  .high-light {
    color: rgba(47, 81, 255, 1);
  }
}
.upload-remark {
  color: #bbbdbf;
  font-size: 12px;
  margin-left: 20px;
}

.item {
  display: flex;
  align-items: center;
  height: 60px;
  background: #f7f9fc;
  border-radius: 4px;
  margin-top: 10px;
  .parentPos {
    position: relative;
    .posType {
      position: absolute;
      bottom: 5px;
      left: 28px;
      background-color: #45ba5f;
      color: #fff;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 500;
      font-size: 10px;
      line-height: 12px;
    }
  }
  .bg-color {
    margin-left: 20px;
    .info {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .size {
        font-weight: 300;
        font-size: 12px;
        line-height: 12px;
        color: #bbbdbf;
      }
    }
  }
}
</style>