IE9 elementUI文件上傳解決

IE9文件上傳（ElementUI）

問題： IE9中沒法使用FormData

思路

1. 基於上面的問題，須要使用form表單上傳文件
2. form表單上傳會引發頁面的刷新，所以須要動態添加一個iframe來避免頁面刷新
3. from表單上傳以後須要調用回調，此時須要監聽iframe的onload事件

坑

1. 文件上傳以後的返回值 Content-Type值不能是application/json 這會致使IE去解析返回結果，最終調用文件的保存或者打開，此處須要與後端協商將Content-Type改成text/plain
2. 若是須要圖片回顯，回顯的圖片路徑中有有query參數，若是有多個參數會出現&,可是返回結果顯示在iframe中因此&會被當作HTML解析爲&因此回顯以前須要將此處轉換回來

問題解決

1. 項目使用VUE編寫，UI是ElementUI，可是Element官方明確了upload方面是不支持IE9的，看源碼的意思是已經擱置了iframe上傳的後續開發

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

   1. 如何觸發上傳

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

      this.$refs.upload.active = true

   2. 如何判斷當前上傳的狀態（添加，更新，刪除，上傳成功，上傳失敗）

      每次上傳的狀態變化時 都會調用 @input-file綁定的回調，形參是newFile, oldFile，經過新舊文件的對比來獲得當前的狀態，感受有點兒反策略模式的意思，本身經過元狀態的組合來獲得當前狀態，習慣的話以爲仍是挺有意思的

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