建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下如何解決IE9 elementUI文件上傳的問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
成都網站建設哪家好，找創(chuàng)新互聯公司！專注于網頁設計、成都網站建設公司、微信開發(fā)、小程序開發(fā)、集團企業(yè)網站建設等服務項目。核心團隊均擁有互聯網行業(yè)多年經驗，服務眾多知名企業(yè)客戶；涵蓋的客戶類型包括：發(fā)電機租賃等眾多領域，積累了大量豐富的經驗，同時也獲得了客戶的一致贊揚！
問題： IE9中無法使用FormData
思路
基于上面的問題，需要使用form表單上傳文件
form表單上傳會引起頁面的刷新，因此需要動態(tài)添加一個iframe來避免頁面刷新
from表單上傳之后需要調用回調，此時需要監(jiān)聽iframe的onload事件
坑
文件上傳之后的返回值 Content-Type值不能是application/json 這會導致IE去解析返回結果，最終調用文件的保存或者打開，此處需要與后端協商將Content-Type改為text/plain
如果需要圖片回顯，回顯的圖片路徑中有有query參數，如果有多個參數會出現&,但是返回結果顯示在iframe中所以&會被當做HTML解析為&所以回顯之前需要將此處轉換回來
問題解決
項目使用VUE編寫，UI是ElementUI，但是Element官方明確了upload方面是不支持IE9的，看源碼的意思是已經擱置了iframe上傳的后續(xù)開發(fā)
改用vue-upload-component 作者對IE9專門做了兼容,就是使用起來理解成本有點兒高
如何觸發(fā)上傳
通過ref獲取upload實例，在添加文件時 激活上傳
this.$refs.upload.active = true
如何判斷當前上傳的狀態(tài)（添加，更新，刪除，上傳成功，上傳失?。?/p>
每次上傳的狀態(tài)變化時 都會調用@input-file綁定的回調，形參是newFile, oldFile，通過新舊文件的對比來得到當前的狀態(tài)，感覺有點兒反策略模式的意思，自己通過元狀態(tài)的組合來得到當前狀態(tài)，習慣的話覺得還是挺有意思的
inputFile(newFile, oldFile) {
// 舊文件活躍 新文件不活躍 此時上傳過程完成
if (newFile && oldFile && !newFile.active && oldFile.active) {
this.$refs.upload.active = false
// 獲得相應數據
let res = '{}'
// 此處判斷相對簡單，可以參考jquery.form.js中做的判斷
if (/(.*)以上是“如何解決IE9 elementUI文件上傳的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！
文章題目：如何解決IE9elementUI文件上傳的問題
轉載源于：http://www.dlmjj.cn/article/ihijph.html
