IE9 elementUI文件上傳的問題解決

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

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

問題： IE9中無法使用FormData

思路

基于上面的問題，需要使用form表單上傳文件
form表單上傳會(huì)引起頁面的刷新，因此需要?jiǎng)討B(tài)添加一個(gè)iframe來避免頁面刷新
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)換回來

問題解決

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

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

如何觸發(fā)上傳

通過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，通過新舊文件的對(duì)比來得到當(dāng)前的狀態(tài)，感覺有點(diǎn)兒反策略模式的意思，自己通過元狀態(tài)的組合來得到當(dāng)前狀態(tài)，習(xí)慣的話覺得還是挺有意思的

inputFile(newFile, oldFile) {
 // 舊文件活躍 新文件不活躍 此時(shí)上傳過程完成
 if (newFile && oldFile && !newFile.active && oldFile.active) {
  this.$refs.upload.active = false
  // 獲得相應(yīng)數(shù)據(jù)
  let res = '{}'
  // 此處判斷相對(duì)簡單，可以參考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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下
2022-07-07
vue項(xiàng)目中Eslint校驗(yàn)代碼報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue項(xiàng)目中Eslint校驗(yàn)代碼報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的相關(guān)資料,前段獲取生成的是base64圖片,需要轉(zhuǎn)化為jpg,png,需要的朋友可以參考下
2023-09-09
vue+elementUI組件table實(shí)現(xiàn)前端分頁功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI組件table實(shí)現(xiàn)前端分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
vue中的計(jì)算屬性實(shí)例詳解
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡單運(yùn)算的。接下來通過本文給大家介紹vue中的計(jì)算屬性,需要的朋友可以參考下
2018-09-09
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)效果的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何通過Vue3實(shí)現(xiàn)簡單的九宮格抽獎(jiǎng)效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的可以了解一下
2023-10-10
Vue3學(xué)習(xí)之事件處理詳解
Vue事件處理是每個(gè)Vue項(xiàng)目的必要方面。它用于捕獲用戶輸入，共享數(shù)據(jù)以及許多其他創(chuàng)造性方式。本文將通過簡單的示例為大家講解了Vue3中事件處理的使用，需要的可以參考一下
2022-12-12
vite+vue3+ts項(xiàng)目中提示無法找到模塊的問題及解決
這篇文章主要介紹了vite+vue3+ts項(xiàng)目中提示無法找到模塊的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
在Vue中實(shí)現(xiàn)父組件控制子組件的值的兩種方法
在Vue開發(fā)中,父組件和子組件之間的數(shù)據(jù)傳遞是一項(xiàng)常見的任務(wù),本文將介紹如何在Vue中實(shí)現(xiàn)父組件控制子組件的值,以便靈活地管理和更新子組件的數(shù)據(jù),文中有詳細(xì)的代碼講解,需要的朋友可以參考下
2023-11-11