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 相关文章推荐
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
浅析JavaScript中的delete运算符
Nov 30 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
jQuery.parseJSON()函数详解
Feb 28 jQuery
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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
删除及到期域名的查看(抢域名必备哦)
2008/05/14 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php实现文章评论系统
2019/02/18 PHP
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
使用Jquery获取带特殊符号的ID 标签的方法
2014/04/30 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
详解angular应用容器化部署
2018/08/14 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
python异常处理try except过程解析
2020/02/03 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
用python计算文件的MD5值
2020/12/23 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Shein英国:女性时尚网上商店
2019/04/10 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
会议邀请函范文
2014/01/09 职场文书
自我鉴定书
2014/03/24 职场文书
租房协议书
2014/09/12 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
化妆品促销活动总结
2015/05/07 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
《牧场之国》教学反思
2016/02/22 职场文书