小編給大家分享一下如何解決IE9 elementUI文件上傳的問(wèn)題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、成都網(wǎng)站建設(shè)公司、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：發(fā)電機(jī)租賃等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊揚(yáng)！

問(wèn)題： IE9中無(wú)法使用FormData

思路

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

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

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

坑

• 文件上傳之后的返回值 Content-Type值不能是application/json 這會(huì)導(dǎo)致IE去解析返回結(jié)果，最終調(diào)用文件的保存或者打開，此處需要與后端協(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ù)開發(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)（添加，更新，刪除，上傳成功，上傳失?。?/p>

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

inputFile(newFile, oldFile) {
 // 舊文件活躍 新文件不活躍 此時(shí)上傳過(guò)程完成
 if (newFile && oldFile && !newFile.active && oldFile.active) {
  this.$refs.upload.active = false
  // 獲得相應(yīng)數(shù)據(jù)
  let res = '{}'
  // 此處判斷相對(duì)簡(jiǎn)單，可以參考jquery.form.js中做的判斷
  if (/
(.*)
以上是“如何解決IE9 elementUI文件上傳的問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            網(wǎng)頁(yè)名稱：如何解決IE9elementUI文件上傳的問(wèn)題            

            文章來(lái)源：http://weahome.cn/article/ihijph.html