baoman / Ezquiz_Platform

  <template>
    <div>

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

      <div class="d1">

        <el-upload
          class="upload-demo"
          ref="upload"

          :action="url"

          :multiple="false"

          :data="{ ...query }"

          :with-credentials="true"
          :limit="1"
          :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>
  </template>
  
  <script>

  export default {

    name: "downUpData",
    props: {
      id: {
        type: String,
        default: "",
      },

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

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

    },

    computed: {
      query: function () {
        if (this.id) {
          return {
            id: this.id,
          };
        } else if (this.examId) {
          return {
            examId: this.examId,
          };
        }
      },
    },

    data() {
      return {
        file: null,
      };
    },
    methods: {
      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) {
        if (res && res.code == 0 && res.success) {
          this.$message.success("上传成功");
          this.$emit("upSuccess");
        } else {
          this.$message.error(res.message);
        }
      },
      upError(res) {
        if (res && res.status == 0) {
          this.$message.success("上传成功");
          this.$emit("upSuccess");
        } else {
          this.$message.error(res.message);
        }
      },
      change(file) {
        this.file = file;
      },

    },
  };

  </script>
  

  <style lang="scss" scoped>
  .d1 {
    padding: 10px;
  }
  .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>