FileReader读取文件详细介绍请访问：http://www.cnblogs.com/xyyt/p/9066882.html
FileReader提供了如下方法：
| readAsArrayBuffer(file) | 按字节读取文件内容，结果用ArrayBuffer对象表示 |
| readAsBinaryString(file) | 按字节读取文件内容，结果为文件的二进制串 |
| readAsDataURL(file) | 读取文件内容，结果用data:url的字符串形式表示 |
| readAsText(file,encoding) | 按字符读取文件内容，结果用字符串形式表示 |
| abort() | 终止文件读取操作 |
readAsDataURL和readAsText较为常用，这里以这两个为例，说明具体使用方法：
1.readAsDataURL：readAsDataURL会将文件内容进行base64编码后输出。
由于媒体文件的src属性，可以通过采用网络地址或base64的方式显示，因此我们可以利用readAsDataURL实现对图片的预览。
2.readAsText:导入文档格式文件，默认按Utf-8格式读取，其他格式需要设置编码格式：
readAsText(file,encoding)可按指定编码方式读取文件，但读取文件的单位是字符，故对于文本文件，只要按规定的编码方式读取即可；而对于媒体文件（图片、音频、视频），其内部组成并不是按字符排列，故采用readAsText读取，会产生乱码，因此不是最理想的读取文件的方式。
示例代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .btn-info { cursor: pointer; width: 88px; height: 36px; line-height: 36px; color: #fff; background-color: #5bc0de; border-color: #46b8da; border: 1px solid transparent; border-radius: 4px; } </style> <title></title> </head> <body> <div id="app"> <div class="fileBtn"> <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <input type="file" name="uploadFile" id="uploadFile" @change="readFile" style="visibility:hidden;position:absolute;top:0px;0px" /> <!--隐藏默认标签样式--> </form> <input type="button" class="btn btn-info" value="导入文档" @click="clickUploadBtn" /> 支持.txt .doc .xls .cvs等文件格式 </div> <article> <h4>上传文档预览</h4> <ul style="list-style: none;"> <li v-for="i in fileData">{{i}}</li> </ul> <h4>上传图片预览</h4> <div><img :src="imgData"></div> </article> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.config.silent = false; Vue.config.devtools = true; var app = new Vue({ el: '#app', data: { fileData: [], imgData:"" }, created: function() {}, mounted: function() {}, methods: { /** * 上传按钮单击事件 */ clickUploadBtn: function() { //触发file的点击事件 document.getElementById("uploadFile").click() }, readFile: function() { var inputBox = document.getElementById("uploadFile"); var fileName=inputBox.value; var fileType; var regImg=/(?:jpg|gif|png|jpeg)$/; var reader = new FileReader(); var self=this; //发起异步请求 if(regImg.test(fileName)){ //图片格式文件 reader.readAsDataURL(inputBox.files[0]); reader.onload = function() { self.imgData=this.result console.log(this.result) } }else{ //其他文档 格式(utf-8编码格式) reader.readAsText(inputBox.files[0], "utf-8"); reader.onload = function() { //读取完成后，数据保存在对象的result属性中 self.fileData = this.result.split(" ") console.log(this.result) } } } } }) </script> </html>