iview upload 手动上传

<template>
  <div class="batchAddCustomer-container">
    <p class="tit-p">水电管理</p>
    <div class="downtext">下载模板</div>
    <div class="text">
      注意事项：
      <div>
        <p>1、表具内容在Excel中只可填写纯文本内容。</p>
        <p>2、表具类型、抄表类型可下拉选择，表具编号均需手动输入。</p>
      </div>
    </div>
    <div class="main">
      <Row>
        <Col>
          <div class="download">
            <Button
              @click="handleDownLoad"
              icon="ios-cloud-download-outline"
              type="primary"
              >下载文件</Button
            >
          </div>
        </Col>
      </Row>
      <Row>
        <Col>
          <div class="upload">
            <Upload
              ref="upload"
              :action="uploadUrl"
              :headers="headers"
              name="file"
              :before-upload="beforeUpload"
              :accept="accept"
            >
              <Button icon="ios-cloud-upload-outline" type="primary"
                >上传文件</Button
              >
            </Upload>
            <div style="margin-top: 5px">
              <!-- 文件内容格式需严格按照提供下载模板的格式 -->
              可以上传excel格式文件，单个文件不可超过5M
            </div>
            <div
              style="
                display: flex;
                justify-content: space-between;
                width: 300px;
              "
              v-if="file"
            >
              <span>{{ file.name }}</span
              ><span @click="file = null"
                ><Icon size="20" type="ios-close"
              /></span>
            </div>
          </div>
        </Col>
      </Row>
      <div class="btn">
        <Button
          @click="handleSubmit"
          :disabled="btnType"
          class="btnStyle"
          type="primary"
          >提交</Button
        >
        <Button @click="handleBack" class="btnStyle">返回</Button>
      </div>
    </div>
  </div>
</template>

<script>
import { importMeterExcel } from "@/api/Instrumentmanagement";
export default {
  data() {
    return {
      uploadUrl: this.$store.state.app.importMeterExcel, //文件上传
      headers: {
        "author-token-key": localStorage.getItem("token"),
      },
      file: null,
      btnType: false,
      accept: ".xlsx,.xls",
      Format: [".xlsx", ".xls"],
    };
  },
  created() {},
  mounted() {
    sessionStorage.setItem("customer_detail", true);
  },
  methods: {
    beforeUpload(file) {
      let fileType = file.name.split(".");
      fileType = fileType[fileType.length - 1].toLowerCase();
      if (fileType == "xlsx" || fileType == "xls") {
        this.file = file; //手动上传，这里返回是关键
        return false;
      } else {
        this.$Message.warning("只能上传.xlsx或.xls格式的文件");
        this.file = null;
        return false;
      }
    },
    //下载文件
    handleDownLoad() {
      let urls =
        this.$store.state.app.downloadMeterImportExcel +
        "?author-token-key=" +
        localStorage.getItem("token");
      window.open(urls);
    },
    handleBack() {
      this.$router.go(-1);
    },
    handleSubmit() {
      if (this.file) {
        this.btnType = true;
        setTimeout(() => {
          this.btnType = false;
        }, 2000);
　　　　　//传给后台
        let formData = new FormData();
        formData.append("file", this.file);
        importMeterExcel(formData).then((res) => {
          if (res.data.status == 200) {
            this.$message.success(res.data.desc);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.desc);
          }
        });
      } else {
        this.$message.error("请先上传文件");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.batchAddCustomer-container {
  .tit-p {
    border: 1px solid #ddd;
    margin: 20px 0;
    padding: 6px;
  }
  .main {
    margin-top: 20px;
    .upload {
      margin-top: 30px;
    }
    .btn {
      margin-top: 20px;
      .btnStyle {
        margin-right: 10px;
      }
    }
  }
}
.downtext {
  color: rgba(92, 164, 171, 1);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin: 10px 0;
}
.text {
  color: rgba(106, 106, 106, 1);
  font-size: 14px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin: 10px 0;
  p {
    height: 30px;
    line-height: 30px;
  }
}
</style>

export function importMeterExcel(data) {
    return util.http({
        url: api + '/meter/importMeterExcel',
        method: 'POST',
        data
    })
}