IE9 elementUI文件上传的问题解决


Posted in Javascript onOctober 17, 2018

问题: IE9中无法使用FormData

思路

  • 基于上面的问题,需要使用form表单上传文件
  • form表单上传会引起页面的刷新,因此需要动态添加一个iframe来避免页面刷新
  • from表单上传之后需要调用回调,此时需要监听iframe的onload事件

  • 文件上传之后的返回值 Content-Type值不能是application/json 这会导致IE去解析返回结果,最终调用文件的保存或者打开,此处需要与后端协商将Content-Type改为text/plain
  • 如果需要图片回显,回显的图片路径中有有query参数,如果有多个参数会出现&,但是返回结果显示在iframe中所以&会被当做HTML解析为&所以回显之前需要将此处转换回来

问题解决

项目使用VUE编写,UI是ElementUI,但是Element官方明确了upload方面是不支持IE9的,看源码的意思是已经搁置了iframe上传的后续开发

改用vue-upload-component 作者对IE9专门做了兼容,就是使用起来理解成本有点儿高

如何触发上传

通过ref获取upload实例,在添加文件时 激活上传

this.$refs.upload.active = true

如何判断当前上传的状态(添加,更新,删除,上传成功,上传失败)

每次上传的状态变化时 都会调用@input-file绑定的回调,形参是newFile, oldFile,通过新旧文件的对比来得到当前的状态,感觉有点儿反策略模式的意思,自己通过元状态的组合来得到当前状态,习惯的话觉得还是挺有意思的

inputFile(newFile, oldFile) {
 // 旧文件活跃 新文件不活跃 此时上传过程完成
 if (newFile && oldFile && !newFile.active && oldFile.active) {
  this.$refs.upload.active = false
  // 获得相应数据
  let res = '{}'
  // 此处判断相对简单,可以参考jquery.form.js中做的判断
  if (/<pre/.test(newFile.response)) {
   res = />(.*)</.exec(newFile.response)[1]
  }
  res = JSON.parse(res)
  if (res.code !== 200) {
   if (res.code === 402) {
    this.$route.push('/login')
    return
   }
   Message.error(res.message)
  } else {
   Message.success('上传成功')
   // 回显图片
   this.upload.url = res.data.url.replace(/&/g, '&')
  }
  if (newFile.xhr) {
   // 获得响应状态码
   console.log('status', newFile.xhr.status)
  }
 }
 // 添加文件
 if (newFile && !oldFile) {
  this.$refs['upload' + this.index].active = true
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
js实现不提示直接关闭网页窗口
Mar 30 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
在小程序开发中使用npm的方法
Oct 17 #Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 #Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 #Javascript
element-ui的回调函数Events的用法详解
Oct 16 #Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 #Javascript
You might like
把77A收信机改造成收音机
2021/03/02 无线电
推荐php模板技术[转]
2007/01/04 PHP
PHP 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
JS的递增/递减运算符和带操作的赋值运算符的等价式
2007/12/08 Javascript
jquery 可排列的表实现代码
2009/11/13 Javascript
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
英国现代市场:ARKET
2019/04/10 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
大三在校生电子商务求职信
2013/10/29 职场文书
总经理助理工作职责
2014/02/06 职场文书
绿色环保标语
2014/06/12 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android