python_invoices/web/src/pages/index/views/index.vue

<template>
  <div v-if="!show">
    <div class="upload">
      <Icon type="md-reverse-camera" />
      <form id="psd">
        <input type="file" accept="image/*" @change="selectImg($event)" />
      </form>
    </div>
    <div class="content">
      <div class="list">
        <img
          v-for="(item, id) in newImg"
          :key="id + '6s'"
          :src="item.url"
          alt=""
        />
        <p v-for="(item, id) in table" :key="id">
          {{ item.name }}：{{ item.num }}
        </p>
      </div>
      <div class="btn">
        <Button type="primary" @click="save" size="large">开始</Button>
      </div>
    </div>
  </div>
  <div class="loading" v-else>
    <div class="spinner"></div>
  </div>
</template>
<script>
import { Icon, Button, Notice, Message } from "view-design";
import "view-design/dist/styles/iview.css";
import axios from "@/utils/axios";
import ImageCompressor from "js-image-compressor";
export default {
  components: {
    Icon,
    Button,
  },
  data() {
    return {
      show: false,
      newImg: [],
      table: [],
      URL: process.env.SERVERURL,
    };
  },
  methods: {
    // 选择多张图片
    selectImg(event) {
      const file = event.target.files;
      const size = 2097152; //2M
      const newArr = [];
      if (file.length > 1) {
        Notice.warning({
          desc: "不能超过1张",
        });
        return;
      }
      for (let j = 0; j < file.length; j++) {
        const el = file[j];
        if (el.size >= size) {
          Notice.warning({
            desc: el.name + "大小超过2M限制请重新上传",
          });
          break;
        } else if (el.size >= size * 0.5) {
          Notice.warning({
            desc: el.name + "大小超过限制将被压缩",
          });
          // 压缩
          new ImageCompressor({
            file: el,
            quality: 0.3,
            mimeType: "image/jpeg",
            success: (result) => {
              newArr.push({
                url: this.getObjectURL(result),
                data: result,
              });
            },
            error: function (msg) {
              Notice.warning({
                desc: "请重新上传",
              });
            },
          });
          continue;
        } else {
          newArr.push({
            url: this.getObjectURL(el),
            data: el,
          });
        }
      }
      this.newImg = newArr;
      document.getElementById("psd").reset();
      this.table = [];
    },
    // 图片临时路径
    getObjectURL(file) {
      var url = null;
      if (window.createObjcectURL != undefined) {
        url = window.createOjcectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    },
    // 识别
    async save() {
      if (!this.newImg.length) return;
      const start = Date.now();
      try {
        this.show = true;
        const formData = new FormData();
        formData.append("pic", this.newImg[0].data);
        const { data,success } = await axios.post("/uploadOneInvoicePic", formData);
        if(!success) throw new Error("上传错误");
        await this.reGetData(data.result_url,start);
      } catch (error) {
        this.show = false;
        Notice.warning({
          desc: error,
        });
      }
    },
    // 处理数据
    setData(data) {
      if (!data && !data.length) return [];
      let content = [];
      for (const key in data) {
        content.push({
          name: this.names(key) || "无",
          num: data[key].length ? data[key][0].word : "",
        });
      }
      return content;
    },
    // 名词
    names(key) {
      let name = "";
      switch (key) {
        case "AmountInFiguers":
          name = "合计";
          break;
        case "AmountInWords":
          name = "合计大写";
          break;
        case "CheckCode":
          name = "校验码";
          break;
        case "Checker":
          name = "复核";
          break;
        case "InvoiceCode":
          name = "发票代码";
          break;
        case "InvoiceCodeConfirm":
          name = "发票代码确认";
          break;
        case "InvoiceDate":
          name = "发票日期";
          break;
        case "InvoiceNum":
          name = "发票编号";
          break;
        case "InvoiceNumConfirm":
          name = "发票编号确认";
          break;
        case "NoteDrawer":
          name = "开票人";
          break;
        case "Payee":
          name = "收款人";
          break;
        case "PurchaserAddress":
          name = "买方地址";
          break;
        case "PurchaserBank":
          name = "买方银行信息";
          break;
        case "PurchaserName":
          name = "买方名称";
          break;
        case "PurchaserRegisterNum":
          name = "买方识别号";
          break;
        case "SellerAddress":
          name = "卖方地址";
          break;
        case "SellerBank":
          name = "卖方银行信息";
          break;
        case "SellerName":
          name = "卖方名称";
          break;
        case "SellerRegisterNum":
          name = "卖方识别号";
          break;
        default:
          break;
      }
      return name;
    },
    // 递归获取数据
    async reGetData(url,start) {
      const res = await axios.get(url);
      if (res.success) {
        this.table = this.setData(res.data.invoice_data.words_result[0].result);
        const end = Date.now();
        Message.info({
          content: "识别总用时：" + Math.abs((start - end) / 1000) + "s",
          duration: 5,
        });  
        this.show = false;       
      } else {
        this.reGetData(url,start);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.upload {
  width: 0.4rem;
  height: 0.4rem;
  overflow: hidden;
  border: dashed 1px #dcdee2;
  color: #dcdee2;
  position: relative;
  margin: 0 auto;
  margin-top: 0.1rem;
  font-size: 0.2rem;
  text-align: center;
  line-height: 0.35rem;
  input {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }
}
.content {
  .list {
    padding: 0.1rem 0;
    max-height: 6rem;
    color: #dcdee2;
    text-align: center;
    font-size: 0.16rem;
    overflow-x: hidden;
    overflow-y: auto;
    img {
      max-width: 100%;
      max-height: 3rem;
      font-size: 0;
    }
    p {
      text-align: left;
      max-width: 4rem;
      margin: 0 auto;
    }
  }
  .btn {
    text-align: center;
    padding-top: 0.1rem;
  }
}
.loading {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 96;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .spinner {
    width: 0.4rem;
    height: 0.4rem;
    background-color: #dcdee2;
    margin: 0 auto;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
  }

  @-webkit-keyframes sk-rotateplane {
    0% {
      -webkit-transform: perspective(1.2rem);
    }
    50% {
      -webkit-transform: perspective(1.2rem) rotateY(180deg);
    }
    100% {
      -webkit-transform: perspective(1.2rem) rotateY(180deg) rotateX(180deg);
    }
  }

  @keyframes sk-rotateplane {
    0% {
      transform: perspective(1.2rem) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(1.2rem) rotateX(0deg) rotateY(0deg);
    }
    50% {
      transform: perspective(1.2rem) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(1.2rem) rotateX(-180.1deg) rotateY(0deg);
    }
    100% {
      transform: perspective(1.2rem) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(1.2rem) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
}
</style>