蝙蝠岛资源网

IE9 elementUI文件上传的问题解决
网络编程 2025/1/8 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

问题： 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(/&amp;/g, '&')
  }
  if (newFile.xhr) {
   // 获得响应状态码
   console.log('status', newFile.xhr.status)
  }
 }
 // 添加文件
 if (newFile && !oldFile) {
  this.$refs['upload' + this.index].active = true
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
IE9,elementUI文件上传,IE9,elementUI,上传,element文件上传
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“IE9 elementUI文件上传的问题解决”

暂无IE9 elementUI文件上传的问题解决的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com