vue と element コンポーネントを使用して、音声のアップロードと再生機能を実現します

みなさん、こんにちは。今日は、音声アップロードと音声再生の機能を実現するための vue と要素コンポーネントの使用について説明します。

実際、音声のアップロードは写真のアップロードとほとんど同じです。

次のコードを書き留める必要はありません。必要なものを確認するだけです。

1 つのアップロード アップロードとオーディオ オーディオのみを使用します

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 に冗長なものもあるので削除しなくても構いません。

お読みいただきありがとうございます。この章があなたのお役に立てば幸いです。