Nuxt.js中如何将外部js生成的blob url导出到Vue文件中使用

第一步：改造RecorderService类，暴露录音完成的回调入口 #

你可以给RecorderService增加自定义回调属性，在生成recording对象后主动触发回调把数据传出，改造后的recorder.js示例代码如下：

export default class RecorderService {
  constructor (baseUrl) {
    this.baseUrl = baseUrl
    this.chunks = []
    this.chunkType = ''
    this.state = 'inactive'
    // 新增回调属性，用于接收外部传入的处理函数
    this.onRecordingComplete = null
  }

  // 下方方法名请替换为你实际处理录音结束逻辑的方法名
  onRecordStop (evt) {
    this.chunks.push(evt.data)
    this.chunkType = evt.data.type

    if (this.state !== 'inactive') {
      return
    }

    let blob = new Blob(this.chunks, { 'type': this.chunkType })
    let blobUrl = URL.createObjectURL(blob)
    const recording = {
      ts: new Date().getTime(),
      blobUrl: blobUrl,
      mimeType: blob.type,
      size: blob.size,
    }
    console.log(blobUrl);
    // 新增：如果有传入回调，就把生成的录音对象传出
    if (typeof this.onRecordingComplete === 'function') {
      this.onRecordingComplete(recording)
    }
  }
}

第二步：Vue页面绑定回调接收数据 #

在recorder.vue中实例化RecorderService时绑定回调，把拿到的录音对象存入页面响应式数组即可，示例代码如下：

// 替换为你实际的recorder.js文件路径
import RecorderService from '@/utils/recorder.js'
import axios from 'axios'

export default {
  data() {
    return {
      recorderInstance: null,
      // 这个就是你模板中遍历的录音列表数组
      recordings: []
    }
  },
  mounted() {
    // 实例化录音服务
    this.recorderInstance = new RecorderService('你的baseUrl参数')
    // 绑定录音完成回调，把返回的录音对象存入数组
    this.recorderInstance.onRecordingComplete = (recordingItem) => {
      this.recordings.push(recordingItem)
    }
  },
  methods: {
    submitFile(_idx) {
      // 拿到对应下标的录音对象的blobUrl
      const targetBlobUrl = this.recordings[_idx].blobUrl
      axios
        .get(targetBlobUrl, {
          responseType: 'blob',
        })
        .then(({ data }) => {
          console.log(data) // 这里即可拿到Blob文件
        })
        .catch((err) => {
          console.error(err)
        })
    }
  },
  // 可选：页面卸载时释放blobUrl避免内存泄漏
  beforeUnmount() {
    this.recordings.forEach(item => {
      URL.revokeObjectURL(item.blobUrl)
    })
  }
}

内容的提问来源于stack exchange，提问作者Mitsuyuki Yamaguchi