大家好，今天和大家分享一下使用vue和element组件来实现语音上传和语音播放这个功能。
其实上传音频其实和上传图片差不多
下面的代码没有必要说都写下来，看自己需要什么吧！
我用到的也只有一个上传upload和音频audio
下面是html的代码部分：
<el-form ref="audioForm" :model="audioForm" :rules="rules" label-width="70px"> <el-form-item prop="Audio"> <el-upload ref="replaceUploader" :file-list="fileList" v-model="audioForm.voiceUrl" class="avatar-uploader" :headers="上传头" :action="上传地址" :limit="1" :show-file-list="false" :on-success="handleReplaceAvatarSuccess" :on-progress="uploadVideoProcess" :beforeUpload="beforeAvatarUpload"> <el-col :span="6"> <el-button size="small" type="primary" class="btnClick">点击上传</el-button> </el-col> <el-col :span="18"> <audio v-if="audioForm.voiceUrl !='' && !audioFlag" :src="audioForm.voiceUrl" controls> 你的浏览器不支持 <code>audio</code> 标签.</audio> <i v-else-if="audioForm.voiceUrl =='' && !audioFlag" class="el-icon-plus avatar-uploader-icon"></i> <el-progress v-if="audioFlag == true" type="line" v-bind:percentage="audioUploadPercent" style="margin-top:7px;"></el-progress> </el-col> </el-upload> </el-form-item>
下面是js的代码部分：
// 音频上传成功 handleReplaceAvatarSuccess(res, file, fileList) { this.audioFlag = false; this.audioUploadPercent = 0; if(res.code == 200){ this.audioForm.voiceUrl = process.env.VUE_APP_BASE_API + res.fileName; this.audioForm.voiceName = fileList[0].name }else{ this.$message.error('视频上传失败，请重新上传！'); } }, //进度条 uploadVideoProcess(event, file, fileList) { this.audioFlag = true; this.audioUploadPercent = file.percentage.toFixed(0) * 1; }, /**上传文件限制--只能上传mp3格式的文件 */ beforeAvatarUpload(file) { const isLt10M = file.size / 1024 / 1024 < 50; if (['audio/mp3','audio/mpeg'].indexOf(file.type) == -1) { this.$message.error('请上传正确的音频格式'); return false; } if (!isLt10M) { this.$message.error('上传音频大小不能超过50MB哦!'); return false; } },
下面这个是上传前的样式：
下面这个是上传后的样式：
如果有不需要的逻辑或其它东西可以进行删除，html里面也有一些多余的东西，不需要删除就可以了。
