前言

通过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 xmlhttplet 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不支持downloadwindow.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包装数据，请求方法和格式可根据自己项目随意修改。