原生ajax經過post或者get下載文件，或處理IE瀏覽器由於後綴不能顯示圖片

前言

經過post或者get下載路徑，還須要知道下載完成的狀態，知道何時下載完成。
IE瀏覽器或者有些手機的瀏覽器有些圖片不顯示，由於圖片路徑不被瀏覽器識別。

概述

顯示圖片你們都知道只要用img標籤，把url給上路徑就能夠顯示出來了，可是若是是路徑是這種

圖片在谷歌火狐或者safari顯示沒有問題，可是在IE上沒法正常顯示。若是是一png、jpg這種路徑的卻沒有問題。那麼怎麼來處理這種問題呢？

思考

爲何這種在IE上沒法顯示？既然能經過路徑獲取圖片的數據
可不能夠直接ajax方法拿到文件數據，而後顯示到頁面或者下載？

獲取文件數據

很少說直接上代碼

/**
 * @description 經過請求獲取文件 
 * @param {String} url 請求接口
 * @param {Object} data 發送的數據
 */
getImageUrl(url, data) {
    return new Promise(resolve => {  // new 一個Promise對象
        let xmlhttp
        let formData = new FormData()  // 這裏用的是formData包裝數據，根據本身項目能夠改爲普通的json數據傳輸 用json傳輸注意轉換成字符串  // let data = JSON.stringify(data)
        if (data) {
            Object.keys(data).forEach(item => {
                if (data[item]) {
                    formData.append(item.toString(), data[item])
                }
            })
        }
        xmlhttp=new XMLHttpRequest()
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob"  // 返回響應數據的類型
        xmlhttp.onload = function(){
            if (xmlhttp.status == 200) {
               let fileUrl = window.URL.createObjectURL(xmlhttp.response)
               let fileName = decodeURI(xmlhttp.getResponseHeader('content-disposition').split('filename=')[1].replace(/\"/g, ''))  //若是是下載文件須要在header中獲取文件名  這裏可能提取文件名不能徹底符合每一個項目，若是獲取的不對 經過xmlhttp.getResponseHeader('content-disposition')方法自行正則或者其餘方法拿到文件名
               resolve({
                    fileName,
                    fileUrl,
                    fileBlob: xmlhttp.response
              })
            }
        }
        xmlhttp.send(formData)   
    })
}

經過這個方法就能夠完成下載一個文件了，並生成一個本地路徑 用法：

const download = (url, data) => {
      getUrl(url, data).then(file => {  // 這裏能夠只用file.flieUrl而後將這個賦值給頁面的圖片就能解決IE不能如今某些特殊路徑的圖片的問題
          if (window.navigator.msSaveBlob) { // IE 兼容IE不支持download
                window.navigator.msSaveOrOpenBlob(file.fileBlob, file.fileName)
                return
          }
          let elementA = document.createElement("a")
          document.body.appendChild(elementA)
          elementA.setAttribute('href', file.fileUrl)   
          elementA.setAttribute('download', file.fileName)
          elementA.click()
          document.body.removeChild(elementA)
      })
}

這短代碼演示的post方法並用FormData包裝數據，請求方法和格式可根據本身項目隨意修改。