src/components/upload.vue

<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: "",
    examId: "",
    url: {
      type: String,
      default: "",
    },
    fileName: {
      type: String,
      default: "模板",
    },
    params: {//上传附带参数
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  computed: {
    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,
    };
  },
  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.status == 0) {
        this.$message.success("上传成功");
        this.$emit("upSuccess", res);
        this.$refs.upload.clearFiles()
      } else {
        this.$message.error(res.info);
      }
    },
    upError(res) {
      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>