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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
Jquery中map函数的用法
Jun 03 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
详解React之key的使用和实践
Sep 29 Javascript
微信小程序开发问题之wx.previewImage
Dec 25 Javascript
vue项目中使用fetch的实现方法
Apr 25 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
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
又一个php 分页类实现代码
2009/12/03 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
Python中函数参数设置及使用的学习笔记
2016/05/03 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
浅谈python标准库--functools.partial
2019/03/13 Python
python实现简单五子棋游戏
2019/06/18 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
英语感恩演讲稿
2014/01/14 职场文书
自荐信格式简述
2014/01/25 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
合作经营协议书范本
2014/04/17 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
暑假开始了,你的暑假学习计划写好了吗?
2019/07/04 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript