大家好,今天和大家分享一下使用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里面也有一些多余的东西,不需要删除就可以了。
感谢您的阅读,希望本章可以帮助到您。