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 相关文章推荐
表单提交时自动复制内容到剪贴板的js代码
Mar 16 Javascript
javascript中length属性的探索
Jul 31 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
RequireJs的使用详解
Feb 19 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
vue router demo详解
Oct 13 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
JS中一些高效的魔法运算符总结
May 06 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
php whois查询API制作方法
2011/06/23 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
thinkphp实现分页显示功能
2016/12/03 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
jQuery拖动元素并对元素进行重新排序
2015/12/30 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
javascript for循环性能测试示例
2019/08/07 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python 系统调用的实例详解
2017/07/11 Python
python 随机森林算法及其优化详解
2019/07/11 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
python 爬取小说并下载的示例
2020/12/07 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
数字天堂软件测试面试题
2012/12/23 面试题
汽车维修与检测专业应届生求职信
2013/11/12 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
计划生育汇报材料
2014/12/26 职场文书
微观世界观后感
2015/06/10 职场文书
纪委立案决定书
2015/06/24 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android