vue使用iview处理上传音频
一 实现效果图 <FormItem label="音频名称"><Input v-model="level.audio_name" placeholder="音频名1-15个字" :maxlength="15"/></FormItem>&
·
一 实现效果图
<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()))
更多推荐
已为社区贡献8条内容
所有评论(0)