82 lines
1.9 KiB
Vue
82 lines
1.9 KiB
Vue
<template>
|
|
<view class="padding-20 background-color-fff height-100vh">
|
|
<u-alert class="margin-bottom-20" description="此页面识别为演示数据,正式环境配置接口即可使用" type="warning" :showIcon="true"></u-alert>
|
|
<view class="ocr">
|
|
<cust-image-upload v-model="imageURl" :maxSize="3" :isShowList="false">
|
|
<template>
|
|
<image :src="picUrl" style="width: 710rpx;height: 210px;"></image>
|
|
</template>
|
|
</cust-image-upload>
|
|
</view>
|
|
<view class="content">
|
|
{{result}}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
defaultImageUrl:'https://sancangshop.oss-cn-beijing.aliyuncs.com/frog/ocrbg.png',
|
|
imageURl:this.defaultImageUrl,
|
|
baseUrl:uni.$u.http.config.baseURL,
|
|
result:'暂无识别结果，请在上方区域上传照片'
|
|
}
|
|
},
|
|
computed:{
|
|
picUrl(){
|
|
//连拍传回来的是逗号间隔的图片路径，现在就取最后一个
|
|
let pic = '';
|
|
if(this.imageURl){
|
|
let arr = this.imageURl.split(',');
|
|
if(arr.length>0){
|
|
pic = arr[arr.length-1];
|
|
}else{
|
|
return this.imageURl;
|
|
}
|
|
}
|
|
//区分本地示意图和上传的图片
|
|
if(pic.indexOf('/profile')!=-1){
|
|
return this.baseUrl+pic;
|
|
}else{
|
|
console.log('走这边了吗？',this.imageURl)
|
|
return this.defaultImageUrl;
|
|
}
|
|
}
|
|
},
|
|
watch:{
|
|
//监听上传完成事件
|
|
picUrl:{
|
|
handler:function(n,o){
|
|
this.getApi(n);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
//调取接口
|
|
getApi(url){
|
|
/** 此处是你需要实现业务的地方，大部分识别接口主要参数就是图片路径**/
|
|
|
|
this.result='棉铃虫'
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
margin-top:30rpx;
|
|
border:1px solid #d9e4ff;
|
|
height: 500rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 40rpx;
|
|
color:#d9e4ff;
|
|
font-style: italic;
|
|
}
|
|
|
|
</style>
|