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给input和textarea设定ie中的focus
May 29 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
Mar 02 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
js模拟F11页面全屏显示
Sep 17 Javascript
Vue简单实现原理详解
May 07 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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
杏林同学录(七)
2006/10/09 PHP
php获取某个目录大小的代码
2008/09/10 PHP
php目录操作实例代码
2014/02/21 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP类的特性实例分析
2016/09/28 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
浅析JSONP技术原理及实现
2016/06/08 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Python环境搭建之OpenCV的步骤方法
2017/10/20 Python
Python重新加载模块的实现方法
2018/10/16 Python
深入了解Django中间件及其方法
2019/07/26 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
python调用摄像头的示例代码
2020/09/28 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
董事长职责范文
2013/11/08 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
会计的岗位职责
2014/03/15 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
《开国大典》教学反思
2016/02/16 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书