IE9 elementUI文件上傳的問題解決

更新時間：2018年10月17日 10:00:11 作者：Feliks

這篇文章主要介紹了IE9 elementUI文件上傳的問題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對各位有所幫助

問題： IE9中無法使用FormData

思路

基于上面的問題，需要使用form表單上傳文件
form表單上傳會引起頁面的刷新，因此需要動態(tài)添加一個iframe來避免頁面刷新
from表單上傳之后需要調(diào)用回調(diào)，此時需要監(jiān)聽iframe的onload事件

坑

文件上傳之后的返回值 Content-Type值不能是application/json 這會導(dǎo)致IE去解析返回結(jié)果，最終調(diào)用文件的保存或者打開，此處需要與后端協(xié)商將Content-Type改為text/plain
如果需要圖片回顯，回顯的圖片路徑中有有query參數(shù)，如果有多個參數(shù)會出現(xiàn)&,但是返回結(jié)果顯示在iframe中所以&會被當(dāng)做HTML解析為&所以回顯之前需要將此處轉(zhuǎn)換回來

問題解決

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

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

如何觸發(fā)上傳

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

this.$refs.upload.active = true

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: