1，上传的方式
1）不需要回调数据：同步表单提交 （兼容低版本ie浏览器）
form + input(type='file')
2）需要回调数据：（formData只兼容ie10+）
//1,绑定change 事件 传递event数据给函数
<input type="file" accept=".xls, .xlsx" @change="importexcel"/>
//2,函数接受 event
importexcel(e){
//3, e可以拿到关于input 的所有数据 如：文件名、文件大小、文件位置等
//4，创建一个空FormData对象 也可以 传入
var formData = new FormData();
// var form = document.getElementById("myForm");
// var formData = new FormData(form ); 获得表单的数据 formData.get(''name)
//5,key：传到后端的数据名字
formData.append('file', e.target.files[0]);
//6, 现在的formData 就可以作为数据到后端 生成文件或图片
}
图片.png
3）需要回调数据：（兼容低版本浏览器）
直接上传base64数据
图片.png
这种方法在：通过外部硬件拿到文件 base64数据 （如高拍仪拍照）
但是 如果 一般的 用户选择文件 上传文件 还没有找到一种 在低版本ie浏览器拿到回调数据的方法
不过在查找国内外资料后 找到一种可以通过 同步变成异步 拿到回调数据的方法
jQuery+jquery.form
http://jquery.malsup.com/form/
2,救命稻草 - jquery.form
1）vue里面添加jquery包 然后再加载 jquery.form
npm install jquery
全局添加jQuery
图片.png
var webpack = require('webpack')
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
],
2）添加 jquery.form 资源
npm i jquery-form
3）main.js文件加入
图片.png
引入jquery
image.png
4）
图片.png
图片.png
图片.png
5）重点来了
在ie9以下使用 ajaxSubmit 得到的返回值 （json类型） ie浏览器会下载文件
怎么办 ？ 拿不到回调数据
6）解决办法
这次使用的解决办法是：
a， 使用jquery.form 的ajaxSubmit 提交文件数据 并且传送一个标识符 （如id ----随机数）
image.png
b，后端返回的类型是 text/html
image.png
c，再通过一个接口 拿到文件上传的返回值 （上传的数据是第一步 携带的id）
这样就可以成功拿到 文件上传的返回值了
7）但是ie上还存在另外一个问题
手动清空 input 文件节点的value 值 在ie上 是不成功的 这会导致 不能上传同一个文件
（待考究：我做的这次兼容里面 不同文件也不可以上传）
image.png
怎么办？
image.png
一般的jquery+javascript+html+css 有删除节点 重建节点的办法
但是在vue里面 因为vue的生命周期 vue 不推荐手动操作节点
只能通过数据驱动页面节点的办法
a，一个数组
image.png
b，页面循环节点 并且设置当前最新的数字 对应一个全新的节点
image.png
c，文件上传完后 数字+1
image.png
但是 这回有一个2个问题
1，性能：
页面 已经来 就循环一个较大的数组 并且 页面循环渲染多个节点
现象是：已经入页面会出现 页面卡住的现象（尤其在ie浏览器上）
本次优化的方案：
image.png
2，设置的数组 值的最大值 就是用户打开这个页面 的时候可以上传的最大文件次数
（如果估判用户 待在一个页面同一个按钮 一直上传 100次或500次的概率是比较低的，那就可以使用这种方法 如果用户在一个页面一直打开 无线的上传文件 那这种方法 就有问题）
总结：
ie对文件上传的拐点
1，ie9- 不能兼容formData 对象
2，input的 change 事件在ie上 value=" 设置的时候会调用一次change
网友评论