|
|
<template>
|
|
|
<view class="background">
|
|
|
<!-- 点击上传图片按钮 -->
|
|
|
<image class="upload_picture" @click="selectAndUploadPicture" src="@/static/homepages/homes/ai_recognize_fruit/pictures/photo.png"></image>
|
|
|
|
|
|
<!-- 所含卡路里显示窗口 -->
|
|
|
<view class="calorie_container">
|
|
|
<text class="calorie_text">{{ calorie }}J</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 所含菜品名称显示窗口 -->
|
|
|
<view class="name_container">
|
|
|
<text class="name_text">{{ name }}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 返回按钮 -->
|
|
|
<image class="button" @click="goBackToHome" src="/static/homepages/homes/ai_recognize_fruit/pictures/button.png"></image>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
calorie: 0,
|
|
|
name: '',
|
|
|
token:uni.getStorageSync("access_token")
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
goBackToHome() {
|
|
|
uni.navigateTo({
|
|
|
url: '/pages/homepages/homes/home/home', // 跳转到主页
|
|
|
});
|
|
|
},
|
|
|
// 选择图片
|
|
|
selectAndUploadPicture() {
|
|
|
const app = getApp();
|
|
|
const serverAddress = app.globalData.fit_journey_ai_address;
|
|
|
console.log("后端服务器的地址是：" + serverAddress);
|
|
|
|
|
|
// 调用选择图片的 API
|
|
|
uni.file
|
|
|
uni.chooseImage({
|
|
|
count: 1, // 选择的图片数量，1表示只选择一张
|
|
|
sizeType: ['compressed'], // 可以选择原图或者压缩图，compressed为压缩图
|
|
|
sourceType: ['album', 'camera'], // 可选择相册或拍照
|
|
|
success: (chooseImageRes) => {
|
|
|
|
|
|
const filePath = chooseImageRes.tempFilePaths[0]; // 获取选择的图片路径
|
|
|
console.log('选择的图片路径:', filePath);
|
|
|
console.log("图片上传成功！");
|
|
|
// 上传文件到后端服务器中
|
|
|
uni.uploadFile({
|
|
|
header: {
|
|
|
'Authorization':this.token
|
|
|
},
|
|
|
url: app.globalData.fit_journey_ai_address + `/ai/fruit`, // 服务器接口地址
|
|
|
filePath: filePath,
|
|
|
name: 'file', // 后端接收的文件参数名称
|
|
|
success: (uploadFileRes) => {
|
|
|
|
|
|
const response = JSON.parse(uploadFileRes.data); // 解析返回的数据
|
|
|
if (response && response.data) {
|
|
|
let result = response.data; // 获取返回的结果
|
|
|
console.log("识别到的果蔬信息:", result);
|
|
|
|
|
|
// 你可以通过以下方式获取识别的果蔬名称和卡路里
|
|
|
for (let [name, calorie] of Object.entries(result)) {
|
|
|
this.name = name; // 存储果蔬名称
|
|
|
this.calorie = calorie; // 存储卡路里
|
|
|
console.log(`水果: ${name}, 卡路里: ${calorie} kcal/100g`);
|
|
|
}
|
|
|
uni.showToast({
|
|
|
title: '恭喜你，AI识别成功了呢~',
|
|
|
icon: 'none',
|
|
|
});
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: '识别失败，请重新上传图片',
|
|
|
icon: 'none',
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
fail: () => {
|
|
|
uni.showToast({
|
|
|
title: '图片上传失败',
|
|
|
icon: 'none',
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
fail: () => {
|
|
|
uni.showToast({
|
|
|
title: '图片选择失败',
|
|
|
icon: 'none',
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import "@/static/homepages/homes/ai_recognize_fruit/css/ai_recongnize_fruit.scss";
|
|
|
</style>
|
