uni-app小程序录音并将录音上传至服务器

Question

uni-app微信小程序实现录音，但是录完后的音频地址为临时地址，那这段音频该怎么上传到服务器呢？
之后又能从服务器获得这段音频并且能在本地播放并保存？

对这整个过程不太明白，现在尝试上传了录音的地址到服务器，然后又从服务器获得地址，但是获得的音频地址无法播放，是地址的问题还是其他问题呢？

Answer 1

引自免费微信小程序：皆我百晓生

在uni-app微信小程序中，录音完成后得到的是一个临时文件路径。为了上传到服务器并确保能正确播放和保存，你需要按照以下步骤操作：

1. 读取临时录音文件内容： 使用 uni-app 的 uni.downloadFile 方法下载临时文件到本地，并获取到录音的二进制数据。

uni.getRecorderManager().onStop((res) => {
  const tempFilePath = res.tempFilePath;
  
  uni.downloadFile({
    url: tempFilePath,
    success: function(res) {
      if (res.statusCode === 200) {
        const audioData = res.data; // 这里是音频文件的二进制内容
        // 下面进行上传操作
      }
    },
    fail: function(err) {
      console.error('下载录音文件失败', err);
    }
  });
});

1. 将录音文件内容上传至服务器： 使用 uni-app 的 uni.uploadFile 将音频二进制数据上传至服务器。假设你的服务器接口为 /api/upload-audio，并且接受 multipart/form-data 格式的数据。

uni.request({
  url: 'https://your-server-url/api/upload-audio',
  method: 'POST',
  header: {
    'content-type': 'multipart/form-data'
  },
  data: {
    audio: {
      uri: tempFilePath, // 注意这里可能需要使用临时文件路径而不是直接传递二进制数据，取决于uploadFile的具体实现
      type: 'audio/mp3', // 根据实际情况设置正确的MIME类型
      name: 'recording.mp3' // 自定义上传后文件名
    }
  },
  success: function(uploadRes) {
    if (uploadRes.statusCode === 200) {
      const serverAudioUrl = uploadRes.data.url; // 这是服务器返回的正式音频地址
      // 可以保存这个地址以便后续播放或下载
    }
  },
  fail: function(err) {
    console.error('上传录音文件失败', err);
  }
});

1. 从服务器获取并播放音频： 当你从服务器获取到音频文件地址后，可以直接在uni-app中使用 <audio> 标签播放音频。

<template>
  <view>
    <audio src="[[serverAudioUrl]]" controls @play="onPlay"></audio>
  </view>
</template>

<script>
export default {
  data() {
    return {
      serverAudioUrl: '' // 在此处替换为实际从服务器获取到的音频URL
    };
  },
  methods: {
    onPlay() {
      // 监听播放事件
    }
  }
};
</script>

请注意，在实际开发过程中，上述代码片段可能需要根据uni-app、服务器端API以及具体音频格式进行调整。同时，请确保服务器端已配置好接收并存储文件的接口，并能正确返回可用的音频资源URL。