需求：通过页面的按钮实现本地文件的选择（以选择歌曲为例）。

思路：利用原生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><inputref="audioInput"style="display: none; height: 10px"type="file"@change="handleFileSelect"multipleaccept="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的数组，以便后续操作。