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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
jquery创建div 实现代码
Apr 27 Javascript
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
基于jquery实现图片广告轮换效果代码
Jul 07 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
JavaScript中return用法示例
Nov 29 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
vue 使用原生组件上传图片的实例
Sep 08 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
js 替换
2008/02/19 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
杨氏矩阵查找的JS代码
2013/03/21 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
Python单链表简单实现代码
2016/04/27 Python
python3写爬取B站视频弹幕功能
2017/12/22 Python
详解python3中tkinter知识点
2018/06/21 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Django异步任务线程池实现原理
2019/12/17 Python
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
司机岗位职责
2013/11/15 职场文书
岗位职责范本
2013/11/23 职场文书
骨干教师培训制度
2014/01/13 职场文书
舞蹈教师自荐信
2014/01/27 职场文书
幼儿园家长评语
2014/02/10 职场文书
公司内部升职自荐信
2015/03/27 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
Java无向树分析 实现最小高度树
2022/04/09 Javascript