4月20日学习进度

<script setup lang="ts">

import {ref} from 'vue'

import request from '@/utils/request'

const voiceList = ref([])

const getVoiceList = async() =>{  

  try {

    const result = await request.get('/voiceList')

    // 直接将数据存储到 data 中

    voiceList.value = result.data.voiceList

     

  } catch (error) {

    alert('请求出错: ' + error)

  }  

}

getVoiceList()

const selectedVoice = ref('')

let selectedFile = null

function uploadPPT(event) {

  const file = event.target.files[0];

  if (!file) {

    alert("请选择一个PPT!");

    return;

  }

  selectedFile = file

}

const generateAudioCourseware = async() =>{

  try {

    const formData = new FormData();

    formData.append("ppt", selectedFile);

    formData.append("voice",selectedVoice.value);

    // 发送POST请求

    const response = await request.post("/generateAudioCourseware", formData)

    console.log(response.data.status);

   

  } catch (error) {

    console.error("请求出错：", error);

    alert("生成过程中出现错误，请稍后重试");

  }

}

</script>

<template>

  <div class="container mt-5">

    <div class="row">

      <!-- 左侧选择语音库 -->

      <div class="col-md-3">

        <h4>选择声音</h4>

        <select v-model="selectedVoice" class="form-select">

            <option v-for="(voice, index) in voiceList" :key="index" :value="voice">

                <span>{{ voice }}</span>

            </option>

        </select>

      </div>

      <!-- 右侧文本框和生成按钮 -->

      <div class="col-md-9">

        <div class="mb-3">

          <h4>上传课件</h4>

          <input type="file" accept=".ppt, .pptx" class="form-control" rows="10" @change="uploadPPT" />

          <!-- <textarea v-model="gen_text" class="form-control" rows="10" placeholder="请输入教学内容..."></textarea> -->

        </div>

        <div class="d-flex justify-content-end">

          <button @click="generateAudioCourseware" class="btn btn-primary">生成有声课件</button>

        </div>

        <!-- 显示生成的音频 -->

        <!-- <div v-if="audioUrl" class="mt-3">

          <h4>生成的音频</h4>

          <AudioPlayer :src="audioUrl" ></AudioPlayer>          

        </div> -->

      </div>

    </div>

  </div>

</template>

<style scoped>

</style>