ocr-invoice/src/App.vue

<template>
  <div class="form-container">
    <div>
      <input type="file" @change="onFileChange"/>
    </div>
    <div>
      <select v-model="selectedType">
        <option disabled selected>---请选择---</option>
        <option value="TrainTicket">火车票</option>
        <option value="TaxiInvoice">出租车发票</option>
        <option value="QuotaInvoice">定额发票</option>
        <option value="Invoice">增值税普通发票</option>
      </select>
      金额： <label id="far" style="color: red;"></label>   票号:<label id="ticket_number" style="color: blue;"></label>
    </div>
    <button @click="uploadFile">Upload</button>
    <!--    <button @click="recognizeOcr">发票识别</button>-->
  </div>
</template>

<style>
.form-container {
  display: flex;
  flex-direction: column;
}

.form-container div {
  margin-bottom: 10px;
}
</style>

<script>

import axios from 'axios';

export default {
  data() {
    return {
      selectedFile: null,
      selectedType: null
    };
  },
  methods: {
    onFileChange(e) {
      this.selectedFile = e.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.selectedFile, this.selectedFile.name);
      formData.append('type', this.selectedType);

      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(response => {
            console.log(response);
            // Parse the response object
            const farValue = response.data.far;
            const ticketValue = response.data.ticket_number;

            // Render the values on the page
            document.getElementById('far').textContent = farValue;
            document.getElementById('ticket_number').textContent = ticketValue;
          })
          .catch(error => {
            console.error(error);
          });
    },
    // recognizeOcr() {
    //
    // }
  }
};
</script>