这篇文章主要介绍“怎么用Vue实现APP录音功能并上传功能”，在日常操作中，相信很多人在怎么用Vue实现APP录音功能并上传功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用Vue实现APP录音功能并上传功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
一、前置条件
首先，我们需要明确的一点是，录音功能需要使用HTML5的新特性，所以在实现录音功能之前，我们需要检查一下浏览器的兼容性。
在2019年，大部分移动端浏览器已经支持HTML5新特性，但仍然存在少部分浏览器不兼容的情况。在实际应用中，我们可以使用Modernizr库检查浏览器是否支持HTML5新特性。
二、实现步骤
配置环境
在安装Vue之前，我们需要安装Node.js和NPM。安装完成后，打开命令行工具，执行以下命令来安装Vue-cli：
npm install -g vue-cli
安装完成后，我们可以使用以下命令来创建一个新的Vue项目：
vue init webpack my-project
其中，“my-project”为项目名称，用户可以自行定义。接下来，按照命令行提示的步骤进行配置即可。
安装依赖
在创建完Vue项目后，我们需要安装一些必须的依赖，其中包括
vue-audio-recorder和
axios。首先，我们需要使用以下命令安装
vue-audio-recorder：
npm install vue-audio-recorder --save
然后，使用以下命令安装
axios：
npm install axios --save
以上两个依赖是实现录音和上传功能的必须依赖。
编写代码
在完成环境配置和依赖安装后，我们需要编写代码实现录音功能。首先，在Vue组件中导入以下代码：
import AudioRecorder from 'vue-audio-recorder' import axios from 'axios'
然后，在Vue组件中定义以下状态：
data() {
return {
audioSrc: '',
audioName: ''
};
}其中，
audioSrc表示录音的链接地址，
audioName为录音文件的名称。
接着，在Vue组件中编写以下代码来实现录音：
mounted() {
this.audioRecorder = new AudioRecorder({
onComplete: (blob)=>{
// 上传录音文件
this.uploadAudio(blob);
},
});
},
methods: {
startRecord() {
this.audioRecorder.start();
},
stopRecord() {
return this.audioRecorder.stop()
.then((blob) => {
// 保存录音blob对象到变量中
this.audioBlob = blob;
// 设置录音链接地址
this.audioSrc = URL.createObjectURL(blob)
})
.catch(() => {
console.log('Media recording failed');
});
},
uploadAudio(audioFile) {
var formData = new FormData();
formData.append("audio", audioFile, this.audioName);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
if (response.status == 200) {
console.log("上传成功");
} else {
console.log("上传失败");
}
}).catch(() => {
console.log("网络异常");
})
}
}其中，
audioRecorder为录音对象，
onComplete表示录音完成后的回调函数，
startRecord为开始录音函数，
stopRecord为停止录音函数，
uploadAudio函数用于上传录音文件。