baoman / Ezquiz_Platform

  <template>
    <div>

      <slot name="down"></slot>

      <div class="d1">

        <el-upload class="upload-demo" ref="upload" :action="uploadUrl" :multiple="false" :data="{ ...query }"
          :with-credentials="true" :limit="1" :on-remove="removec" :on-change="change" :on-success="upSuccess"
          :on-error="upError">

          <!-- accept="application/vnd.ms-excel" -->

          <div class="upload-btn">
            <i class="el-icon-upload"></i>

            <el-button class="btn" size="mini" type="primary">选择文件并上传</el-button>

          </div>

        </el-upload>
      </div>

      <div class="d1">
        <el-progress :percentage="percent" v-if="percent > 0"></el-progress>
      </div>
      <slot name="descption"></slot>

    </div>
  </template>
  
  <script>

  import conf from "@/config/index"; // 路径配置

  export default {

    name: "downUpData",
    props: {

      id: "",
      examId: "",

      url: {
        type: String,
        default: "",
      },

      fileName: {
        type: String,
        default: "模板",
      },

      params: {//上传附带参数
        type: Object,
        default: function () {
          return {}
        },
      },

    },

    computed: {

      percent: function () {
        var _percentage = 0;
        console.log(this.isOked)
        if (this.file?.percentage) _percentage = this.file?.percentage;
        if (_percentage >= 100) {
          if (!this.isOked) _percentage = 96;
          else _percentage = 100;
        }
        return _percentage;
      },
      uploadUrl: function () {
        var requestUrl = '';
        var ogrinUrl = this.$props.url;
        var baseUrl = conf.baseURL;
        if (baseUrl == '/' && ogrinUrl.indexOf('/') == 0) {
          requestUrl = ogrinUrl;
        }
        else {
          requestUrl = baseUrl + ogrinUrl
        }
        return requestUrl;
      },

      query: function () {
        if (this.id) {
          return {
            id: this.id,

            ...this.params

          };
        } else if (this.examId) {
          return {
            examId: this.examId,

            ...this.params

          };

        } else {
          return {
            ...this.params
          }

        }
      },
    },

    data() {
      return {
        file: null,

        isOked: false

      };
    },
    methods: {

      removec(file, fileList) {
        this.file = null;
        this.isOked = false;
      },

      async submitUpload() {
        this.$refs.upload.submit();

        // const formData = new FormData()
        // formData.append('id',this.componentId)
        // formData.append('file',new File(this.file.raw))
        // let {status,info} = await uploadExcel(formData);
        // if(status===0){
        //   this.$message.success(info);
        //   this.$emit("upSuccess")
        // } else {
        //   this.$message.error(info);
        // }
      },
      upSuccess(res) {

        this.isOked = true;

        if (res && res.status == 0) {

          this.$message.success("上传成功");

          this.$emit("upSuccess", res);

          this.$refs.upload.clearFiles()

        } else {

          this.$message.error(res.info);

        }
      },
      upError(res) {

        this.isOked = true;

        if (res && res.status == 0) {

          this.$message.error("上传失败");

        } else {
          this.$message.error(res.message);
        }
      },
      change(file) {
        this.file = file;
      },

    },
  };

  </script>
  

  <style lang="scss" scoped>
  .d1 {
    padding: 10px;

    overflow: hidden;

    :deep(.el-upload-list) {
      width: 100%;
    }

  }

  .btn {

    border-radius: 8px;
    font-weight: normal;
  }

  .upload-demo {
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-icon-upload {
      font-size: 48px;
      margin-bottom: 6px;
      color: #667ffd;
    }

  }

  </style>

  
  <style>
  .el-progress__text {
    margin-left: 10px !important;
    font-size: 14px !important;
  }
  
  .el-upload-list .el-progress {
    display: none !important;
  }
  </style>