IE9 elementUI文件上传的问题解决

2018-10-17 25 Feliks

问题: 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方法和技巧大全
Dec 27 22
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 24
详谈javascript异步编程
Feb 21 28
JSP基于Bootstrap分页显示实例解析
Jun 12 18
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 30
微信小程序表单弹窗实例
Jul 19 19
bootstrap tooltips在 angularJS中的使用方法
Apr 10 38
手机访问当前页面