HTTP 连接器 - 阿里云服务市场 - 植物花卉识别
本案例来自三方开发者「苏灏」
1. 使用场景
本例介绍一下在宜搭中如何使用阿里云服务市场的OpenAPI实现植物花卉识别。
2. 实现功能
2.1 配置获取宜搭附件临时免登地址连接器
因为宜搭直接上传的附件 / 图片有登录态校验,直接用到植物花卉识别会导致连接器异常,所以我们需要先配置获取宜搭附件临时免登地址的连接器。
此处为语雀内容卡片,点击链接查看:HTTP 连接器 - 钉钉开放平台 - 获取宜搭附件临时免登地址
2.2 购买植物花卉识别服务
(1)在 阿里云API市场 购买 【植物花卉识别 API】
本方案推荐阿里云市场API,用户可自行选择具有植物花卉识别能力且符合宜搭连接器6种任一身份认证方式的公网接口服务。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680594813261-1288f22b-8886-4325-8480-7e8643869435.png)
(2)进入 工作台 ,查看自己的 AppCode
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680594896221-5d5938c0-b736-4131-b39f-68e75043231f.png)
(3)查看 API 文档准备创建 HTTP 连接器
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680594919226-57e842e7-f5fc-4ec3-af32-a6a1438ab02c.png)
2.3 创建 HTTP 连接器
(1)创建 HTTP 连接器
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1677466933143-3b17541d-db45-4c3d-a87e-f99cb85de056.png)
(2)配置连接器基本信息
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680594973763-35eedb35-a5d7-49d3-bf15-5c83c00045f1.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680594986553-41d83a8e-f390-42f3-b666-987258752d53.png)
(3)配置连接器执行动作
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595095491-5d9963a3-2342-4da6-9c79-93a53e5cd4d1.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595118262-e189b42c-2094-4071-b15d-a63d2f2afa88.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595135783-9a54fabb-566f-46d6-ae70-056a77ec6701.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595147964-37038361-83c0-4159-ad2d-e0e78edb49ca.png)
请根据自身所购买的 API 文档去配置。
(4)创建鉴权模板
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595177585-78db3539-c185-4e7f-8074-5d279fc10061.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1677467383076-b63c0e75-86dc-4a3d-a74b-f806d111b873.png)
AppCode 可在目录 2.2 - (2)中查看。
2.4 在宜搭中使用HTTP连接器
(1)配置表单页面
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595217607-685ac020-9d06-443a-9801-839c8a001855.png)
(2)配置数据源
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595326475-096decb6-64b6-4cb0-9ec7-d0d5a9b2afe4.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595351063-3fead02d-73e3-4dbf-ae11-69bd58bb337e.png)
(3)前端使用
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680593100312-7719efbb-4866-4ab6-bb06-7fb709207945.png)
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680596721597-c1a8c290-880d-462c-8a08-ca9e48e70d72.png)
// 注意修改应用密钥
const systemToken = 'XXXXXXXXXXXXXXXXXXXXXXXX';
var loading;
// 上传待识别的图片
export async function onFileChange({ value }) {
if (value.length) {
loading = this.utils.toast({
title: '识别中...',
type: 'loading'
});
const { url } = value[0];
const temporaryUrl = await this.getTemporaryUrls(url); // 获取附件临时免登地址
const ocrResult = await this.plantFlower(temporaryUrl); // 获取植物花卉识别结果
const { name, code, desc } = ocrResult;
if (code == 1) {
this.utils.toast({
title: '识别成功',
type: 'success',
});
} else {
this.utils.toast({
title: desc,
type: 'error',
});
};
this.$('textField_lg1z05yx').setValue(name);
} else {
this.$('textField_lg1z05yx').reset();
};
}
// timeout:附件失效时间(ms),默认 60000ms (一分钟),最大 86400000ms (24小时)
export function getTemporaryUrls(fileUrl = '', timeout = 180000) {
if (!fileUrl) {
return;
};
return this.dataSourceMap.getTemporaryUrls.load({
inputs: JSON.stringify({
path: {
appType: pageConfig.appType
},
query: {
systemToken,
userId: loginUser.userId,
fileUrl,
timeout,
}
})
}).then(res => {
const { result = '' } = res;
return result;
}).catch(error => {
console.log(error.message);
loading();
this.utils.toast({
title: '请检查获取宜搭附件临时免登地址的连接器是否配置正确.',
type: 'error'
});
});
}
// 植物花卉识别
export function plantFlower(image) {
if (!image) {
return;
};
return this.dataSourceMap.plantFlower.load({
inputs: JSON.stringify({
body: {
image,
}
})
}).then(res => {
const { name = '', code, desc } = res;
loading();
return {
name,
code,
desc,
};
}).catch(error => {
console.log(error.desc);
loading();
this.utils.toast({
title: '请检查植物花卉识别的连接器是否配置正确.',
type: 'error'
});
});
}
3. 实现效果
图片内容:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1680595696304-528354dd-770a-4870-8dae-047f38943731.jpeg)
识别结果:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1680595689000-ab3ad8a5-fa7c-4933-8f92-69bf9d690276.png)
4. 在线试玩
本文档对您是否有帮助?