原生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) => {
      getImageUrl(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包装数据，请求方法和格式可根据自己项目随意修改。