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调用XML制作连动下拉列表框
Jun 25 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
纯JS代码实现气泡效果
May 04 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
JS中的phototype详解
Feb 04 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
Express框架之connect-flash详解
May 31 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 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验证码(支持中文)
2007/02/14 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
PHP函数学习之PHP函数点评
2012/07/05 PHP
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python、Matlab求定积分的实现
2019/11/20 Python
python求前n个阶乘的和实例
2020/04/02 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
基于Python实现下载网易音乐代码实例
2020/08/10 Python
canvas实现按住鼠标移动绘制出轨迹的示例代码
2018/02/05 HTML / CSS
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
实习单位接收函模板
2014/01/10 职场文书
食品安全责任书
2014/04/15 职场文书
中学优秀班主任事迹材料
2014/05/01 职场文书
企业诚信承诺书
2014/05/23 职场文书
无私奉献演讲稿
2014/09/04 职场文书
会计岗位职责
2015/02/03 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang