FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
<script src="{$basehref}gui/javascript/vue.min.js"/></script/>
<script src="{$basehref}gui/javascript/axios.min.js"/></script/>
<script type="text/javascript" src="http://127.0.0.1/Smartpro/third_party/jquery/jquery-3.2.1.min.js" language="javascript"></script>
<div class="cd-popup">
<div class="panel-head" id="add"><strong><span class="title">上传数据</span></strong></div>
<div class="body-content">
<input id="upload_file" multiple="multiple" style="display:" type="file" />
<button v-on:click="chooseFile">选取文件</button>
<button v-on:click="uploadfile">上传</button>
</div>
</div>
<script type="text/javascript"/>
new Vue({
el:".cd-buttons",
data:{
mess:'',
fsize:''
},
methods:{
uploadfile:function () {
var upload_file = jQuery('#upload_file');
var f = upload_file[0].files[0]; //id=upload_file 的input中获取files object
if(f.type!='application/vnd.ms-excel'){
this.mess = '格式不正确';
return;
}
if(f.size>2097152){
this.fsize = '文件大小超出了2M';
return;
}
var filename = f.name;
var reader = new FileReader(); //实例化读取对象
reader.readAsDataURL(f); //读取本地文件f到内存：格式为DataURL
//读取完成执行reader.onloadend事件
reader.onloadend = (function (e) {
var dataURL = reader.result; //读写的文件保存在reader对象的result属性中
axios({
method:'post',
url:'http://127.0.0.1/Smartpro/lib/usermanagement/usersExcel.php?act=ajaxImport',
//给php服务端传递的数据
data:{
filedata:dataURL,
filename:filename
}
}).then(function (res) {
//这里res是接收php返回的数据，这个值如何传递给returnmes
jQuery('#returnmes').text(res.data.msg);
});
});
}
}
})
</script>ajax 与 axios</a>区别
Ajax：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
axios：
用于浏览器和node.js的基于Promise的HTTP客户端
1. 从浏览器制作XMLHttpRequests
2. 让HTTP从node.js的请求
3. 支持Promise API
4. 拦截请求和响应
5. 转换请求和响应数据
6. 取消请求
7. 自动转换为JSON数据
8. 客户端支持防止XSRF