<template> <div> <input type="file" ref="fileInput" @change="onFileChange" /> <button @click="uploadImage">上传图片并识别</button> <div v-if="imageUrl"> <img :src="imageUrl" width="300" /> <div>识别结果：{{ ocrText }}</div> </div> </div> </template> <script> import axios from "axios" export default { data() { return { // 图片地址 imageUrl: "", // 返回文本 ocrText: "", imageFile: null, }; }, methods: { onFileChange(e) { this.imageFile = e.target.files[0]; // 指向对象url this.imageUrl = URL.createObjectURL(this.imageFile); }, async uploadImage() { const formData = new FormData(); formData.append("image", this.imageFile); try { const response = await axios.post("http://localhost:3000/api/ocr", formData); this.ocrText = response.data.text; } catch (error) { console.log(11) console.error(error); } }, }, }; </script>

这段代码看起来是一个 Vue 组件，它通过文件上传功能实现图片的识别。当用户选择文件后，它将创建一个包含文件的 FormData，并将其传递给 OCR API。在成功响应后，它会更新组件的数据以显示识别的文本。

在代码中，您需要确保引入了 axios 库。同时，您需要确保已经正确配置 OCR API 的地址和端口号。如果出现错误，请检查控制台输出以获取更多信息。