Vue学习之路 - JS页面文件内容读取

转载于 2019-03-26 11:21:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blacktusz/p/10598984.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用HTML和JavaScript读取本地文件的方法，并通过FileReader API以文本形式加载文件内容。该方法适用于需要用户上传文件并立即查看内容的应用场景。

直接上方法代码：

<input type="file" class="file">
<el-button size="small" @click="readFile" >读取</el-button>

click方法：

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