<template>
  <div class="tesseractTest-all">
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <button @click="extractContent">提取内容</button>
    <div v-if="extractedText">
      <h3>提取的内容：</h3>
      <p>{{ extractedText }}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageFile: null,
      extractedText: '',
      mykey:'sk-9d8b85ab52ae460fa4401e50a2941c2f',
    };
  },
  methods: {
    handleFileUpload(event) {
      this.imageFile = event.target.files[0];
    },
    async extractContent() {
      if (!this.imageFile) {
        alert('请先选择一张图片');
        return;
      }

      const formData = new FormData();
      formData.append('image', this.imageFile);

      try {
        const response = await axios.post('https://api.deepseek.com/v1/ocr', formData, {
          headers: {
            'Authorization': `Bearer `+this.mykey,
            'Content-Type': 'multipart/form-data'
          }
        });

        this.extractedText = response.data.text;
      } catch (error) {
        console.error('提取内容失败:', error);
        alert('提取内容失败，请重试');
      }
    }
  }
};
</script>
<style>
.tesseractTest-all{
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 5px #0005;
  border-radius: 10px;
  min-height: 830px;
  min-width: 1550px;
}
</style>