<template>
|
<div>
|
<div class="app">
|
<a-spin :spinning="spinning" >
|
<div class="dragger">
|
<a-upload-dragger
|
v-model:fileList="fileList"
|
name="file"
|
accept="image/png, image/jpeg"
|
:multiple="false"
|
action="/herb/dry/real/identify"
|
:beforeUpload="beforeUpload"
|
@change="handleChange"
|
@drop="handleDrop"
|
>
|
<p class="ant-upload-drag-icon">
|
<inbox-outlined></inbox-outlined>
|
</p>
|
<p class="ant-upload-text">点击选择图片，或将图片拖到此区域内上传</p>
|
<p class="ant-upload-hint">
|
仅支持单个图片
|
</p>
|
</a-upload-dragger>
|
|
</div>
|
|
<div class="card">
|
|
|
<a-row :gutter="10" style="width: 100%;">
|
<a-col :span="12">
|
<div >
|
<a-card title="识别图像" >
|
<div class="img">
|
<div v-if="previewUrl" style="display: flex; justify-content: center;">
|
<!-- <a-image
|
:width="200"
|
:src="previewUrl"
|
/> -->
|
<img :src="previewUrl" alt="预览图片" style="max-height: 500px; max-width: 100%;" />
|
</div>
|
</div>
|
|
|
</a-card>
|
</div>
|
</a-col>
|
<a-col :span="12">
|
<div >
|
<a-card title="识别结果">
|
<div class="res">
|
<a-table :columns="columns" :data-source="results" :pagination="false">
|
</a-table>
|
</div>
|
</a-card>
|
</div>
|
</a-col>
|
</a-row>
|
</div>
|
</a-spin>
|
</div>
|
</div>
|
|
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref, onUnmounted } from "vue";
|
import { InboxOutlined } from '@ant-design/icons-vue';
|
import { message } from 'ant-design-vue';
|
import type { UploadChangeParam } from 'ant-design-vue';
|
const fileList = ref([]);
|
const previewUrl = ref()
|
const results = ref([])
|
const spinning = ref(false)
|
const columns = [
|
{
|
title: '药材',
|
dataIndex: 'name',
|
key: 'name',
|
},
|
{
|
title: '英文名',
|
dataIndex: 'english',
|
key: 'english',
|
},
|
{
|
title: '可信度',
|
dataIndex: 'probabily',
|
key: 'probabily',
|
},
|
]
|
const handleChange = (info: UploadChangeParam) => {
|
// console.log("图片",info.file);
|
// let reader = new FileReader()
|
// reader.readAsDataURL(info.file.originFileObj) // 文件转换
|
// reader.onloadend = function () {
|
// let src = this.result
|
|
// console.log("src::", src)
|
|
// }
|
|
const status = info.file.status;
|
if (status !== 'uploading') {
|
console.log(info.file, info.fileList);
|
}
|
if (status === 'done') {
|
message.success(`${info.file.name} 识别成功！！`);
|
console.log("done",info.file.response.result)
|
results.value = info.file.response.result
|
spinning.value = false
|
} else if (status === 'error') {
|
message.error(`${info.file.name} 识别失败！！`);
|
}
|
};
|
function handleDrop(e: DragEvent) {
|
console.log(e);
|
}
|
|
function beforeUpload(file) {
|
console.log("before",file)
|
spinning.value = true
|
previewUrl.value = URL.createObjectURL(file)
|
|
console.log("pre",previewUrl.value)
|
}
|
|
|
|
|
|
// DOM挂载完成后渲染图表
|
onMounted(() => {
|
|
|
});
|
|
onUnmounted(() => {
|
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.app {
|
width: 100%;
|
|
|
.dragger {
|
margin:10px;
|
height: 200px;
|
background-color: white;
|
}
|
|
.card {
|
margin-left: 10px;
|
display: flex;
|
.img {
|
height: 500px;
|
}
|
.res {
|
height: 500px;
|
}
|
}
|
}
|
|
|
|
|
</style>
|
