《RuoYi基于SpringBoot+Vue前后端分离的Java快速开发框架学习》系列博客_Part4_三模态融合

系列博客目录

---

---

目标

 实现三模态融合，将文本、图片、音频从前端上传，后端返回数据库数据。主要包含两种类别，电脑和弓。而且电脑和弓的数据在数据库中不同的表中，表的列名存在不同(仅最后一列不同)。

Step1:之前工作形成子组件

 之前已经实现了图文识别、音文识别、音图识别的前端页面，而当时的要求，比如图文识别就是用户上传图片，得到相应文字信息(来自数据库)。所以图文识别，就已经写好了上传图片的vue。同理上传音频的vue也写好了。这次直接把之前的组件当作子组件。

Step2:弥补缺失的文本子组件，同时举例如何子组件向父组件传数据

 通过下面代码可以看出，当点击按钮时，将文本框中内容传递给父组件。
文本子组件代码如下：

<template>
  <div class="app-container">
    <label for="textInput">请输入文本内容：</label>
    <textarea
      id="textInput"
      v-model="textContent"
      rows="5"
      placeholder="在此输入文本内容..."
      style="width: 100%; margin-bottom: 10px;"
    ></textarea>
    <el-button
      type="primary"
      @click="submitTextContent"
      :disabled="!textContent.trim()"
    >
      点击此按钮上传文本
    </el-button>
  </div>
</template>

<script>
export default {
     
     
  name: "TextInput",
  data() {
     
     
    return {
     
     
      textContent: "", // 文本输入框内容
    };
  },
  methods: {
     
     
    submitTextContent() {
     
     
      // 通过事件将文本内容传递给父组件
      this.$emit("fileUploaded", this.textContent.trim());//trim()去除文本两端的空白字符
      this.$message.success("文本提交成功！");
    },
  },
};
</script>

当上面子组件点击按钮后，调用父组件fileUploaded指定的函数。 <PictureToText v-if="showChild" @fileUploaded="handleImageUpload" />
父组件中的表格的表头是根据后端返回的resultType 动态变化的。
setTimeout()函数是在延迟后，执行里面的代码。
父组件核心代码如下：

<template>
  <div>
  <div class="container">
    <!-- 模态选择区域 目前不需要，因为要直接提供三个模态的上传 -->
<!--    <el-radio-group v-model="radio2">-->
<!--      <el-radio :label="3">图片</el-radio>-->
<!--      <el-radio :label="6">音频</el-radio>-->
<!--      <el-radio :label="9">文本</el-radio>-->
<!--    </el-radio-group>-->
    <!-- 图片上传区域 -->
    <!-- 动态显示子组件 -->
    <div class="child">
<!--      <PictureToText v-if="radio2 === 3 && showChild" @updateResult="handleResult"/>-->
      <PictureToText v-if="showChild" @fileUploaded="handleImageUpload" />
    </div>
    <!-- 音频上传区域 -->
    <div class="child">
<!--      <AudioToText v-if="radio2 === 6"/>-->
      <AudioToText v-if="showChild" @fileUploaded="handleAudioUpload" />
    </div>
    <!-- 文本上传区域 -->
    <div class="child">
      <TextUploader v-if="showChild" @fileUploaded="handleTextUpload"/>
    </div>

    <!-- 添加提交按钮 -->
<!--    <button v-if="showChild" @click="submitData">提交数据</button>-->
    <!-- 提交按钮，独占一行 -->
    <div class="button-container">
    <el-button
        v-if="showChild"
        type="primary"
        class="action-button"
        @click="submitData"
    >
      提交数据进行分析
    </el-button>
    </div>
  </div>
    <div>
    <el-table v-if="tableOfResultVisible" v-loading="loading"  element-loading-text="拼命分析中,预计加载结果需要等待大约10秒钟...." :data="jmwlList" >
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="交易id" align="center" prop="交易id" show-overflow-tooltip/>
      <el-table-column label="品牌" align="center" prop="品牌" show-overflow-tooltip/>
      <el-table-column label="商品名称" align="center" prop="商品名称" show-overflow-tooltip />
      <el-table-column label="评论用户名"