front/pages/homepages/homes/ai_recognize_hot/ai_recognize_hot.vue

<template>
  <view class="background">
    <!-- 点击上传图片按钮 -->
    <image class="upload_picture" @click="selectAndUploadPicture" src="/static/homepages/homes/ai_recognize_hot/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_hot/pictures/button.png"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      calorie: 0,
      name: '',
    };
  },
  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': app.globalData.token // 授权 token
									},
							  url: app.globalData.fit_journey_ai_address+`/ai/hot`, // 服务器接口地址
							  
							  filePath: filePath,
							  name: 'file', // 后端接收的文件参数名称
							  success: (uploadFileRes) => {
								console.log('上传结果:', uploadFileRes);
								const response = JSON.parse(uploadFileRes.data); // 解析返回的数据
								if (response && response.data) {
								  // 处理返回的数据
								  this.calorie = response.data.calorie || 0;
								  this.name = response.data.name || '识别失败，请重新上传图片';
								} 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_hot/css/ai_recongnize_hot.scss";
</style>