vue使用iview处理上传音频

一 实现效果图

 

<FormItem label="音频名称">
    <Input v-model="level.audio_name" placeholder="音频名1-15个字" :maxlength="15"/>
</FormItem>
<div style="position: relative">
    <div class="mask"></div>
    <audio :src="level.audio_url" style="float: right;" controls
            :id="`audio${lIndex}`"/>
    <div class="mask-bottom"></div>
</div>
<Upload :format="['wma','mp3','ogg']" :on-success="audioUploadSuccess"
        style="width: 50%" :before-upload="audioUploadBeforeUpload"
        :data="{token: qiNiuToken, key: md5AudioKey}" action="//up-z2.qiniup.com/" :max-size="102400"
        :on-exceeded-size="audioHandleMaxSize">
    <Button icon="android-microphone" @click="uploadAudio(level)">上传音频</Button>
</Upload>

   uploadAudio(level) {//上传音频前

       this.audio_info = level
   },
   
  audioUploadSuccess(res) {//音频上传成功
       this.audio_info.audio_url = 'https://qiniu.nf.com/' + res.key;
  },

  audioHandleMaxSize(file) { //音频文件上传过大
    this.$Notice.warning({title: '音频文件', desc: '音频文件  ' + file.name + ' 太大啦,不能超 
    过100M.'});
  },

  uploadAudio(level) {//上传音频前

     this.audio_info = level
  },
  

1 token: qiNiuToken 这里的qiNiuToken为后台请求过来的。

2 md5AudioKey: 'summary/audio/' + md5(String(Date.now()))