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实现相同内容合并单元格的代码
Jan 12 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
vue实现抽屉弹窗效果
Nov 15 Javascript
javascript局部自定义鼠标右键菜单
Dec 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
Yii使用ajax验证显示错误messagebox的解决方法
2014/12/03 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
JS input 数字验证代码
2009/07/30 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
JAVA和C++的区别
2013/10/06 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
事务机电主管工作职责
2014/02/25 职场文书
社区反邪教工作方案
2014/06/16 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
礼仪培训心得体会
2016/01/22 职场文书