Blob + ArrayBuffer 怎么将流文件,转为本地文件读取?

Blob + ArrayBuffer

ArrayBuffer对象:(模拟内存中二进制数据, 用来操作内存)

01:设计目的为了满足 JavaScript 与显卡之间大量的、实时的数据交换(二进制)

02:只能通过视图(TypedArray视图和DataView视图)来进行操作。“视图”部署了数组接口,这意味着,可以用数组的方法操作内存
TypedArray视图:共包括 9 种类型的视图,用来读写简单类型的二进制数据。
DataView视图:可以自定义复合格式的视图,用来读写复杂类型的二进制数据。


Blob对象:(二进制大型对象,操作二进制文件

01: Blob 对象表示一个二进制文件的数据内容,通常用来读写文件,比如一个图片文件的内容就可以通过 Blob 对象读写
02:  Blob的数据不可变。最多只能slice出新的Blob。不可变意味着你想直接翻转它某个二进制位的值,是不可能的。
想使用这个Blob的话,只能整体使用。比如最常用的URL.createObjectURL,FormData等。

01: 调取后端接口,后端返回流数据?一般用于文件下载(excel和图片等相关文件下载)

Blob + ArrayBuffer 怎么将流文件,转为本地文件读取?_第1张图片

02:axios请求  在请求数据的接口的时候,添加在请求头中  responseType: 'arraybuffer',此处转成了base64

axios.get( global.SERVER_URL + '/ws/dms/meta/' + imgData[0].id, { 
    responseType: 'arraybuffer',
 }).then(res => {
    
    引入buffer库解析:
     const url = 'data:image/png;base64,' + new Buffer(res).toString('base64'); 

    btoa解析:
        'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))
 })

03: web自动解析



 

04: XMLHttpRequest

var xmlRequest = new XMLHttpRequest();
xmlRequest.open("GET", url, true);  
xmlRequest.responseType = "blob";// 指明返回的数据的类型是二进制
xmlRequest.onreadystatechange = function(e) {  
    if (this.readyState == 4 && this.status == 200) {  
        console.log(this._response)
    }  
}  
xmlRequest.send(null);

 

你可能感兴趣的:(js,axios)