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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
JS 实现图片直接下载示例代码
Jul 22 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
生产制造追溯系统之在线打印功能
Jun 03 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
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
Zend 输出产生XML解析错误
2009/03/03 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
vue实现选中效果
2020/10/07 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python多继承顺序实例分析
2018/05/26 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
2014年管理人员工作总结
2014/12/01 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
免职通知
2015/04/23 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript