Use vue and element components to realize voice upload and playback functions

Hello everyone, today I will share with you the use of vue and element components to realize the function of voice upload and voice playback.

In fact, uploading audio is almost the same as uploading pictures.

There is no need to write down the following codes, just see what you need!

I only use one upload upload and audio audio

Here is the code part of the 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>

Here is the code part of 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;       
            }
    },

This is how it looks before uploading:

The following is the uploaded style:

If there is unnecessary logic or other things, you can delete them, and there are some redundant things in the html, so you don’t need to delete them.

Thanks for reading, I hope this chapter can help you.