《本地上传音频，需要支持预览》
<template>
<div>
<!-- 原生的不好看 0.0 -->
<!-- <input type="file" @change="handlerInput"> -->
<!-- 上传组件 -->
<el-upload
class="upload-demo"
action="#"
:before-upload="beforeUpload">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<!-- 回显列表 -->
<ul class="box">
<li v-for="(item, index) in fileList" :key="item.id">
<span>{{item.name}}</span>
<!-- 音频控件 -->
<audio :src="item.src" controls></audio>
<!-- 删除按钮 -->
<i class="el-icon-delete-solid" @click="removeFile(index)"></i>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
fileList: [] //音频列表
};
},
methods: {
// 文件上传前回调 createObjectURL 会创建一个 url 地址
beforeUpload(file) {
this.fileList.push({
src: URL.createObjectURL(file),
name: file.name,
id: new Date().getTime()
})
},
// 原生的方法
handlerInput(el) {
let file = el.target.files[0];
this.fileList.push({
src: URL.createObjectURL(file),
name: file.name,
id: new Date().getTime()
})
},
// 删除对应行
removeFile(index) {
this.fileList.splice(index, 1)
}
}
}
</script>
<style scoped>
.box {
list-style: none;
padding: 0 588px;
}
.box li {
display: flex;
justify-content: space-evenly;
align-items: center;
margin-top: 7px;
}
.box li i{
color: brown;
cursor: pointer;
}
</style>
