<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>
时间: 2024-04-28 07:20:23 浏览: 11
这段代码看起来是一个 Vue 组件,它通过文件上传功能实现图片的识别。当用户选择文件后,它将创建一个包含文件的 FormData,并将其传递给 OCR API。在成功响应后,它会更新组件的数据以显示识别的文本。
在代码中,您需要确保引入了 axios 库。同时,您需要确保已经正确配置 OCR API 的地址和端口号。如果出现错误,请检查控制台输出以获取更多信息。
相关问题
改成@select呢?
在uni-app中,使用`@select`代替`@change`来监听图片选择的变化。以下是使用`@select`来改写前面的示例代码:
```vue
<template>
<div>
<input type="file" ref="fileInput" @select="handleFileSelect" accept="image/*" />
<button @click="uploadImage">上传</button>
</div>
</template>
<script>
export default {
data() {
return {
file: null,
};
},
methods: {
handleFileSelect(event) {
this.file = event.target.files[0];
},
uploadImage() {
// 上传逻辑
},
},
};
</script>
```
在上述代码中,我们将`@change`事件改为了`@select`事件。当用户选择图片文件时,会触发`handleFileSelect`方法,将选择的图片文件保存在`file`变量中。
当用户点击上传按钮时,会调用`uploadImage`方法,可以在该方法中添加上传逻辑来处理图片上传操作。
请注意,`@select`事件是uni-app框架提供的特殊事件,它在不同平台上的实现可能有所差异。需要根据实际情况进行适配和处理。
springboot vue 图片上传功能
实现 Spring Boot 后端和 Vue.js 前端的图片上传功能可以分为以下几个步骤:
1. 创建 Spring Boot 后端接收图片的 API。可以使用 Spring Boot 的 `@PostMapping` 注解和 `@RequestParam` 注解来接收上传的图片文件,然后将文件保存到服务器的本地磁盘或者云存储中,返回保存成功的图片路径。
示例代码:
```java
@PostMapping("/uploadImage")
public String uploadImage(@RequestParam("file") MultipartFile file) throws IOException {
// 保存文件
String fileName = file.getOriginalFilename();
String filePath = "/path/to/image/directory/" + fileName;
File dest = new File(filePath);
file.transferTo(dest);
// 返回保存成功的图片路径
return filePath;
}
```
2. 创建 Vue.js 前端上传图片的组件,并在组件中使用 `axios` 库发送请求到后端接口上传图片文件。
示例代码:
```vue
<template>
<div>
<input type="file" ref="fileInput" @change="handleFileChange">
<button @click="uploadImage">上传图片</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
imageUrl: ''
}
},
methods: {
handleFileChange(event) {
this.file = event.target.files[0];
},
uploadImage() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/api/uploadImage', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
this.imageUrl = response.data;
console.log('Image uploaded successfully: ' + this.imageUrl);
}).catch(error => {
console.log('Error uploading image: ' + error);
});
}
}
}
</script>
```
其中 `handleFileChange` 方法会在用户选择要上传的图片文件时被触发,将选中的文件保存到组件的 `file` 属性中。`uploadImage` 方法会创建一个 `FormData` 对象,将组件的 `file` 属性添加到其中,然后使用 `axios` 发送 POST 请求到后端接口上传图片文件,并将上传成功后返回的图片路径保存到组件的 `imageUrl` 属性中。
3. 在 Vue.js 前端页面中显示上传成功的图片。
示例代码:
```vue
<template>
<div>
<input type="file" ref="fileInput" @change="handleFileChange">
<button @click="uploadImage">上传图片</button>
<img :src="imageUrl">
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
file: null,
imageUrl: ''
}
},
methods: {
handleFileChange(event) {
this.file = event.target.files[0];
},
uploadImage() {
let formData = new FormData();
formData.append('file', this.file);
axios.post('/api/uploadImage', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
this.imageUrl = response.data;
console.log('Image uploaded successfully: ' + this.imageUrl);
}).catch(error => {
console.log('Error uploading image: ' + error);
});
}
}
}
</script>
```
其中 `<img :src="imageUrl">` 标签用来显示上传成功的图片,其 `src` 属性绑定到组件的 `imageUrl` 属性,当 `imageUrl` 属性更新时,图片会自动刷新。