Element-UI中打开本地文件

一、问题

有时候我们要打开本地文件直接在页面上查看，怎么用Element-UI提供的功能实现？

二、html部分

<el-upload                             
     :auto-upload="false"
     :on-change="elInFile"
     multiple
     accept="audio/*">
 <el-button size="mini" icon="el-icon-upload2" round></el-button>
</el-upload>

说明：

1. :auto-upload是关闭上传功能，就是说打开的文件不向某个接口提交，只在前端打开
2. :on-change是文件变化的钩子函数
3. mutiple允许一次上传多个文件
4. accept是文件类型，audio指音频

三、js部分

/**
 1. 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用。
 2. 这个函数本就在上传循环体中，所以不需要反复操作
 3. @param f {@link Object}：当前上传的文件；
 4. @param fs {@link Array}：当前文件列表；
  */
 elInFile(f, fs) {
     this.staticFiles.push(f)
     this.mscUrl = URL.createObjectURL(fs[0].raw)
     this.mscName = fs[0].name
 },

说明：

1. f和fs都是调用时自带的参数。elInfile这个函数很特别，由于它在:on-change中，所以如果你上传了n个文件，那么这个函数就会循环执行n次
2. this.staticFiles是我自定义的一个空数组，把文件信息转录出来，方便实现另一个功能，后面讲
3. URL.createObjectUrl()这个函数是为一个对象创建出URL，以便组件调用，比如html提供的音频/视频播放器

四、上一个/下一个

以音频为例，上传了多个音频但是不能手动前进后退实在太蠢了，这就需要刚才的那个 this.staticFiles

next() {
     this.indexNow = this.indexNow+1
     if(this.indexNow<this.staticFiles.length){
         const au=document.getElementById('Audio')
         au.pause()
         au.src = URL.createObjectURL(this.staticFiles[this.indexNow].raw)
         this.mscName = this.staticFiles[this.indexNow].name
         au.play()
     }else{
         this.indexNow = this.indexNow-1
     }

 },
 pre(){
     this.indexNow = this.indexNow-1
     if(this.indexNow>=0){
         const au=document.getElementById('Audio')
         au.pause()
         au.src = URL.createObjectURL(this.staticFiles[this.indexNow].raw)
         this.mscName = this.staticFiles[this.indexNow].name
         au.play()
     }else{
         this.indexNow = this.indexNow+1
     }
 }