uni-app微信小程序实现录音,但是录完后的音频地址为临时地址,那这段音频该怎么上传到服务器呢?
之后又能从服务器获得这段音频并且能在本地播放并保存?
对这整个过程不太明白,现在尝试上传了录音的地址到服务器,然后又从服务器获得地址,但是获得的音频地址无法播放,是地址的问题还是其他问题呢?
uni-app微信小程序实现录音,但是录完后的音频地址为临时地址,那这段音频该怎么上传到服务器呢?
之后又能从服务器获得这段音频并且能在本地播放并保存?
对这整个过程不太明白,现在尝试上传了录音的地址到服务器,然后又从服务器获得地址,但是获得的音频地址无法播放,是地址的问题还是其他问题呢?
引自免费微信小程序:皆我百晓生
在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);
}
});
});
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);
}
});
<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。