需求：通过页面的按钮实现本地文件的选择（以选择歌曲为例）。
思路：利用原生input的type="file"来实现。
###1.先自定义上传按钮
//HTML部分
<div class="p10 bs mb10" style="height: 40px">
<el-button type="text" size="small" @click="triggerFileInput">
选择歌曲
</el-button>
<span class="f12 ml10">请先选择本地音乐！！！</span>
<input
ref="audioInput"
style="display: none; height: 10px"
type="file"
@change="handleFileSelect"
multiple
accept="audio/*"
/>
</div>
//input的点击事件转移到自定义的按钮上面
triggerFileInput() {
this.$refs.audioInput.click();
},
2.获取上传数据<通过input的change事件可实现>
// 添加本地音乐
handleFileSelect(event) {
const files = event.target.files;
this.selectedFiles = JSON.parse(JSON.stringify(musicList));
this.fileUrl = null;
for (let i = 0; i < files?.length; i++) {
const file = files[i];
const reader = new FileReader();
reader.onload = (e) => {
const fileObj = {
name: file.name,
url: e.target.result,
// lrc: null,
lrcList: [],
};
this.selectedFiles.push(fileObj);
};
reader.readAsDataURL(file);
}
},
这里将选择的歌曲处理格式之后存放进selectedFiles的数组，以便后续操作。
