第IE9elementUI文件上傳的問(wèn)題解決基于上面的問(wèn)題，需要使用form表單上傳文件

form表單上傳會(huì)引起頁(yè)面的刷新，因此需要?jiǎng)討B(tài)添加一個(gè)iframe來(lái)避免頁(yè)面刷新

from表單上傳之后需要調(diào)用回調(diào)，此時(shí)需要監(jiān)聽(tīng)iframe的onload事件

坑

文件上傳之后的返回值Content-Type值不能是application/json這會(huì)導(dǎo)致IE去解析返回結(jié)果，最終調(diào)用文件的保存或者打開(kāi)，此處需要與后端協(xié)商將Content-Type改為text/plain

如果需要圖片回顯，回顯的圖片路徑中有有query參數(shù)，如果有多個(gè)參數(shù)會(huì)出現(xiàn),但是返回結(jié)果顯示在iframe中所以會(huì)被當(dāng)做HTML解析為所以回顯之前需要將此處轉(zhuǎn)換回來(lái)

問(wèn)題解決

項(xiàng)目使用VUE編寫，UI是ElementUI，但是Element官方明確了upload方面是不支持IE9的，看源碼的意思是已經(jīng)擱置了iframe上傳的后續(xù)開(kāi)發(fā)

改用vue-upload-component作者對(duì)IE9專門做了兼容,就是使用起來(lái)理解成本有點(diǎn)兒高

如何觸發(fā)上傳

通過(guò)ref獲取upload實(shí)例，在添加文件時(shí)激活上傳

this.$refs.upload.active=true

如何判斷當(dāng)前上傳的狀態(tài)（添加，更新，刪除，上傳成功，上傳失敗）

每次上傳的狀態(tài)變化時(shí)都會(huì)調(diào)用@input-file綁定的回調(diào)，形參是newFile,oldFile，通過(guò)新舊文件的對(duì)比來(lái)得到當(dāng)前的狀態(tài)，感覺(jué)有點(diǎn)兒反策略模式的意思，自己通過(guò)元狀態(tài)的組合來(lái)得到當(dāng)前狀態(tài)，習(xí)慣的話覺(jué)得還是挺有意思的

inputFile(newFile,oldFile){

//舊文件活躍新文件不活躍此時(shí)上傳過(guò)程完成

if(newFileoldFile!newFile.activeoldFile.active){

this.$refs.upload.active=false

//獲得相應(yīng)數(shù)據(jù)

letres='{}'

//此處判斷相對(duì)簡(jiǎn)單，可以參考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){

//獲得響應(yīng)狀態(tài)碼

console.log('status',newFile.xhr.status)

//添加文件

if(newFile!oldFile){

this.$refs['u