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)
}`

Answer 2

你可以使用FileReader，这个是js里的一个构造函数，具体可以参考FileReader文档

下面给你一个例子

// 一个文件上传的回调 <input type="file" onchange="onChange(event)">
function onChange(event) {
  var file = event.target.files[0];
  var reader = new FileReader();
  reader.onload = function(event) {
    // 文件里的文本会在这里被打印出来
    console.log(event.target.result)
  };

  reader.readAsText(file);
}

Answer 3

解决了的问题记得点采纳呀，没采纳我就强答一波，实现原理和你的一样。

测试地址：https://www.lilnong.top/static/html/sf-a-1190000022597533-file-preview-input-drop.html

文章地址：前端上传前预览文件 image、text、json、video、audio

Answer 4

不明白是要显示文件里面的内容还是显示文件名, 文件名很好显示,要显示文件里的内容,看你上传的文件类型,需要去相关的插件解析出来再显示