vuejs怎样导入文件并且读取文件呢？

Question

需求是：点击上面的导入按钮。选中文件后，需要读取文件里面的全部文本内容，在下面的框里面显示出来（显示刚才读取出来的全部文本内容）。只需要纯文本即可。element ui可以实现这种效果吗？
如图：

Answer 1

解决了：
代码如下：
<input type="file" class="file"/>
<el-button type="primary" @click="readFile">导入文本</el-button>
`

readFile() {
  let fileSelect = document.querySelector('input[type=file]').files[0]//找到文件上传的元素
  let reader = new FileReader()
  if (typeof FileReader === 'undefined') {
    console.log('您的浏览器不支持FileReader接口')
    return
  }
  reader.readAsText(fileSelect, 'gb2312')//注意读取中文的是用这个编码，不是utf-8
  const _this = this
  reader.onload = function() {
    // console.log(reader.result)
    _this.$nextTick(() => {
      _this.voiceContent = reader.result
      // console.log(_this.voiceContent)
    })
  }
  console.log(reader)
}`