如何解決IE9 elementUI文件上傳的問題

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

問題： IE9中無法使用FormData

思路

• 基于上面的問題，需要使用form表單上傳文件

• form表單上傳會引起頁面的刷新，因此需要動態(tài)添加一個iframe來避免頁面刷新

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

坑

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

• 如果需要圖片回顯，回顯的圖片路徑中有有query參數(shù)，如果有多個參數(shù)會出現(xiàn)&,但是返回結果顯示在iframe中所以&會被當做HTML解析為&所以回顯之前需要將此處轉換回來

問題解決

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

改用vue-upload-component 作者對IE9專門做了兼容,就是使用起來理解成本有點兒高

如何觸發(fā)上傳

通過ref獲取upload實例，在添加文件時 激活上傳

this.$refs.upload.active = true

如何判斷當前上傳的狀態(tài)（添加，更新，刪除，上傳成功，上傳失?。?/p>

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

inputFile(newFile, oldFile) {
 // 舊文件活躍 新文件不活躍 此時上傳過程完成
 if (newFile && oldFile && !newFile.active && oldFile.active) {
  this.$refs.upload.active = false
  // 獲得相應數(shù)據(jù)
  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) {
   // 獲得響應狀態(tài)碼
   console.log('status', newFile.xhr.status)
  }
 }
 // 添加文件
 if (newFile && !oldFile) {
  this.$refs['upload' + this.index].active = true
 }
}

以上是“如何解決IE9 elementUI文件上傳的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！