vue选择本地文件

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

思路：利用原生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的数组，以便后续操作。