javascript读取URLBlob（blob:http://）

一、URLBlob是什么？

A blob: URL 不是指服务器上存在的数据，而是指当前页面的浏览器当前内存中的数据。它在其他页面上不可用，在其他浏览器中不可用，在其他计算机上也不可用。比如blob:http://localhost:9090/43b0ed6c-042c-479e-a5ce-432ec5645552

二、XMLHttpRequest将URLBlob转换成BlobXMLHttpRequest

1.用 AJAX 请求从 blob: URL 中“获取”数据（即使它实际上只是将其从浏览器的内存中拉出，而不是发出 HTTP 请求）

代码如下（示例）：

var xhr = new XMLHttpRequest() //创建XMLHttpRequest对象

xhr.open('get', URLBlob, true)//建立http链接

xhr.responseType = 'blob' //明确后端返回类型，至关重要

xhr.onload = function () {

        if (this.status == 200) {

                var blob = this.response

                //现在得到blob数据了，下面是自己的代码

        }

}

xhr.send() // 发送请求

2.用FileReader读取blob

代码如下（示例）：

const oFileReader = new FileReader() //创建FileReader实例
oFileReader.onload = function () {
    const result = this.result // 获取结果
}
oFileReader.readAsDataURL(blob) //以data: URL base64流形式读取文件，也可以以文本形式读取文件，详情查阅FileReader

---

总结

完整代码如下：

var xhr = new XMLHttpRequest() //创建XMLHttpRequest对象

xhr.open('get', URLBlob, true)//建立http链接

xhr.responseType = 'blob' //明确后端返回类型，至关重要

xhr.onload = function () {

        if (this.status == 200) {

                var blob = this.response //读取到blob数据

                const oFileReader = new FileReader() //创建FileReader实例

                oFileReader.onload = function () {

                    const result = this.result // 获取结果
                    //下面根据是自己代码，比如上传文件等

                }
                oFileReader.readAsDataURL(blob) //以data: URL base64流形式读取文件，也可以以文本形式读取文件，详情查阅FileReader

        }

}

xhr.send() // 发送请求