<template>
|
<div class='audio_upload'>
|
<div
|
class="flex"
|
v-if="openBtn"
|
>
|
<button
|
class="m_btn small"
|
@click="onUpload"
|
>上传音频</button>
|
<!-- <button-->
|
<!-- class="m_btn small"-->
|
<!-- @click="onOpen"-->
|
<!-- >录音</button>-->
|
</div>
|
<div class="item">
|
<ul
|
class="flex fw"
|
v-if="more && item.length"
|
>
|
<li
|
v-for="(i,j) in item"
|
:key="j+'-c-a'"
|
@click="appListenMusic(i.path)"
|
>
|
<i class="ico el-icon-collection-tag"></i>
|
<b>{{isTime(i.timeout)}}</b>
|
<span
|
class="close"
|
@click.stop="onClose(i.id)"
|
><i class="el-icon-close"></i></span>
|
</li>
|
</ul>
|
<ul
|
v-else
|
class="flex"
|
>
|
<li
|
v-if="timeout>0"
|
@click="appListenMusic(path)"
|
>
|
<i class="ico el-icon-collection-tag"></i>
|
<b>{{isTime(timeout)}}</b>
|
<span
|
class="close"
|
@click.stop="onClose"
|
v-if="close"
|
><i class="el-icon-close"></i></span>
|
</li>
|
</ul>
|
</div>
|
<button
|
class="m_btn mini dn"
|
id="upload-audio"
|
></button>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
size: { type: Number, default: 50 },
|
url: { type: String, default: "" },
|
more: { type: Boolean, default: false },
|
openBtn: { type: Boolean, default: true },
|
close: { type: Boolean, default: true },
|
list: {
|
type: Object,
|
default: () => {
|
return {};
|
},
|
},
|
},
|
components: {},
|
data() {
|
return {
|
path: "",
|
timeout: "",
|
item: [],
|
};
|
},
|
inject: ["appRecordingAudio", "appListenMusic"],
|
watch: {
|
url(n) {
|
this.path = n;
|
},
|
list: {
|
handler(n) {
|
if (n.timeout) {
|
this.timeout = n.timeout;
|
this.path = n.url;
|
}
|
},
|
deep: true,
|
},
|
},
|
methods: {
|
isTime(v) {
|
if (isNaN(v)) return 0;
|
let d = demo.es6().timeoutYMD(v);
|
if (d.time) {
|
return d.h + ":" + d.m + "'" + d.s;
|
}
|
return "00:00'00";
|
},
|
onUpload() {
|
demo.js("#upload-audio").find("label").click();
|
},
|
onOpen() {
|
this.appRecordingAudio();
|
},
|
onClose(id) {
|
if (this.more) {
|
this.item = this.item.filter((r) => {
|
return id !== r.id;
|
});
|
this.$emit("on-success", this.item);
|
} else {
|
this.path = "";
|
this.timeout = "";
|
this.$emit("on-success", { path: "", timeout: "" });
|
}
|
},
|
emit() {
|
let os = { path: this.path, timeout: this.timeout, id: Date.now() };
|
if (this.more) {
|
if (this.path && this.timeout) {
|
this.item.push(os);
|
}
|
this.$emit("on-success", this.item);
|
} else {
|
this.$emit("on-success", os);
|
}
|
},
|
},
|
mounted() {
|
let ts = this;
|
ts.path = ts.url;
|
demo.js("#upload-audio").file(
|
(e) => {
|
let load = demo.loading();
|
if (e.file.size / 1024 / 1024 > ts.size) {
|
demo.remove(load);
|
return demo.toast("音频容量过大，请传入小于" + ts.size + "MB的音频");
|
}
|
ts.$js.length(e.file, "audio", (n) => {
|
if (n > 0) {
|
if (n > 60) {
|
demo.remove(load);
|
return demo.toast("音频控制在60秒内");
|
}
|
ts.$api.upload(
|
"common/uploadimage",
|
{ file: e.file },
|
(r) => {
|
ts.path = r;
|
let a = demo._div("audio");
|
a.setAttribute("src", r);
|
|
a.addEventListener("progress", () => {
|
ts.timeout = a.duration;
|
ts.emit();
|
});
|
a.addEventListener("error", () => {
|
ts.timeout = "";
|
ts.path = "";
|
demo.toast("音频错误");
|
});
|
demo.remove(load);
|
demo.js("#" + e.id).val("");
|
},
|
() => {
|
demo.remove(load);
|
demo.js("#" + e.id).val("");
|
}
|
);
|
} else {
|
demo.remove(load);
|
}
|
});
|
},
|
{ type: "other", accept: "audio/*" }
|
);
|
},
|
};
|
</script>
|
<style lang='less' scoped>
|
.audio_upload {
|
.m_btn + .m_btn {
|
margin-left: 20px;
|
}
|
.item {
|
margin: 15px 5px 5px;
|
li {
|
position: relative;
|
padding: 5px 15px 5px 5px;
|
color: #fff;
|
background-color: rgb(133, 197, 197);
|
border-radius: 5px;
|
margin: 0 15px 15px 0;
|
cursor: pointer;
|
b {
|
font-size: 13px;
|
}
|
.close {
|
width: 20px;
|
height: 20px;
|
line-height: 20px;
|
text-align: center;
|
border-radius: 50%;
|
background-color: rgb(68, 149, 241);
|
font-size: 15px;
|
position: absolute;
|
top: -10px;
|
right: -10px;
|
}
|
}
|
}
|
}
|
</style>
|
