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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
详解Webwork中Action 调用的方法
Feb 02 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 15 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
Vue 修改网站图标的方法
Dec 31 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
arguments对象
2006/11/20 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
2016/12/30 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
python动态监控日志内容的示例
2014/02/16 Python
Django的session中对于用户验证的支持
2015/07/23 Python
详解python上传文件和字符到PHP服务器
2017/11/24 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Django数据库操作之save与update的使用
2020/04/01 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
汽车促销活动方案
2014/03/31 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
校车安全管理责任书
2015/05/11 职场文书
运动会主持词大全
2015/07/02 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python