vue+element语音上传

vue+element语音上传

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;       
      	  }
    },

上传之前：

上传之后：
样式什么的自己改