妇女工作总结,天天向上混血王子,中餐厅赵薇放的歌
问题: ie9中无法使用formdata
思路
坑
问题解决
项目使用vue编写,ui是elementui,但是element官方明确了upload方面是不支持ie9的,看源码的意思是已经搁置了iframe上传的后续开发
改用 作者对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 } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论