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;width: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("\n")
console.log(this.result)
}
}
}
}
})
</script>
</html>