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

天下熙熙
  • 423

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

回复
阅读 1.1k
4 个回答

解决了:
代码如下:
<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)
}`

你可以使用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);
}

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

你知道吗?

宣传栏