讯飞语音转写

逻辑：语音上传 –> prepare（讯飞）返回一个task_id –> 音频分片上传 upload（讯飞，调用多次，直到文件全部上传完成）–> 合并音频merge（讯飞）–>每三分钟调用getProgress（讯飞）–>得到结果getResult（讯飞）

讯飞官方文档：https://www.xfyun.cn/doc/asr/lfasr/API.html#接口调用流程

安装插件：js-md5 和 crypto-js

接口文件如下：

import axios from '@/libs/api.request'
const front = 'api/'

export const Prepare = (data) => {
   
  return axios.request({
   
    url: `${
     front}prepare`,
    data: data,
    method: 'post'
  })
}

export const Upload = (data) => {
   
  return axios.request({
   
    url: `${
     front}upload`,
    data: data,
    method: 'post'
  })
}

export const Merge = (data) => {
   
  return axios.request({
   
    url: `${
     front}merge`,
    data: data,
    method: 'post'
  })
}

export const Progress = (data) => {
   
  return axios.request({
   
    url: `${
     front}getProgress`,
    data: data,
    method: 'post'
  })
}

export const Result = (data) => {
   
  return axios.request({
   
    url: `${
     front}getResult`,
    data: data,
    method: 'post'
  })
}

主要文件如下：

<template>
    <div class="container">
        <div class="file-upload">
            <Button v-if="!isFile" type="primary" @click="file">上传文件</Button>
            <label v-if="!isFile" ref="upload"
                   style="position: relative;">
                <input type="file"
                       @change="selectFile"
                       style="position: absolute; width: 1px; height: 1px; opacity: 0; z-index: -1;">
            </label>
            <div v-if="isFile" class="file-panel">
                <div class="file-title">
                    <div class="operate">
                        <span>{
   {
   fileName}}</span>
                        <div v-if="isProgress" class="file-progress">
                            <p class="progress" :style="{width: progress + '%'}"></p>
                        </div>
                        <p style="color: #2db7f5" v-if="mergeShow">语音合并中...</p>
                        <p style="color: #2b85e4" v-if="progressShow">{
   {
   progressText}}</p>
                    </div>
                </div>
                <div class="file-info">文件大小：{
   {
   fileSize}}</div>
            </div>
        </div>
        <p style="color: #333333;font-size: 14px">转换结果如下：</p>
        <div class="file-text" v-html="text"></div>
    </div>

</template>

<script>
  import {
    Prepare, Upload, Progress, Merge, Result } from '../../api/text'
  import md5 from 'js-md5'
  import cryptoJs from 'crypto-js'

  export default {
   
    components: {
   },
    data () {
   
      return {
   
        isFile: false,
        // 文件参数
        fileName: '',
        fileSize: '',
        // chunkSize: 5242880, //5M
        chunkSize: 10485760,//10M

        app_id: 'xxxxxxxx',
        secretkey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',// 语音转写密钥
        slice_num: '',
        taskId: