Blob ：（Binary Large Object）二进制大对象
Bold是一个专门支持文件的二进制对象，用来支持文件操作
Blob构造函数接受两个参数，
- 参数一： 字符串或二进制对象
- 参数二： 一个配置项 对象 {}
参数二目前只有一个type属性， 值是字符串， 标识数据的MIME类型，（默认值是空字符串）
列： new Blob([ 'b' ]) // => {size: 2, type: ""}
size： 字节数（大小）。
type： 类型。（会在下文详细解说）
创建一个Blob，查看其原型提供的方法
其中：
arrayBuffer: 读和写,用来表示通用的、固定长度的原始二进制数据缓冲区，你不能直接操作
ArrayBuffer的内容，而是要通过类型数组对象或DataView对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。
slice: 切割blob对象，（可实现分片上传等）slice(start, end)
text: 会返回一个（期约）promise对象，包含了blob的内容，使用UTF-8的编码来解析
stream:
在MDN有详细的解说 / 点击跳转
文件流下载
AJAX 请求时，如果指定responseType属性为blob，下载下来的就是一个 Blob 对象。
列：
function getAxiosBlob() {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
我们可以通过window.URL.createObjectURL，接收一个Blob（File）对象，将其转化为Blob URL,方便某些API使用，这些URL以blob:开头，标识这是一个blob文件
实际使用中：会配合a标签的download属性配合下载
axios.get(imageUrl, {
headers: {
'Authorization': token,
},
responseType: 'blob', // axios 添加blob type
})
.then((respone) => {
let resData = response.data
// new Blob() 对返回的文件流类型处理
const blob = window.URL.createObjectURL(new Blob([resData], { type: 'application/ms-excel'}));
// 生成一个a元素
let a = document.createElement('a')
// 创建一个单击事件
let event = new MouseEvent('click')
// 图片名称
a.download = '订单数据报表' + new Date().getTime() + '.xlsx' // 默认的名称
// 将生成的URL设置为a.href属性
a.href = blob
a.dispatchEvent(event)
})
img 显示blob图片
window.URL.createObjectURL，的URL还可以赋值给img.src 进行图片的显示
<div class="sss">
<input id="pictrue" type="file" accept="*/image">
</div>
<script>
let inputpic = document.querySelector('#pictrue')
let sss = document.querySelector('.sss')
inputpic.addEventListener('change', function(e) {
let file = this.files[0]
let url = window.URL.createObjectURL(new Blob([file]))
let im = document.createElement('img')
im.src = url
sss.appendChild(im)
})
</script>
4、文件分片
在这里我们可以看到 ，上传图片在其中的原型上有Blob对象，意味着我们可以直接使用Blob的方法,(这里的示例还是用上面的代码)（切割主要用到slice）
<div class="sss">
<input id="pictrue" type="file" accept="*/image">
</div>
<script>
let inputpic = document.querySelector('#pictrue')
let sss = document.querySelector('.sss')
let arrupload = []
inputpic.addEventListener('change', function(e) {
let fileblob = this.files[0]
const end = fileblob.size
const chunk = 2000
let start = 0
while (start < end) {
arrupload.push(fileblob.slice(start, start + chunk))
// 实际使用中应直接使用下面的方法 直接调用接口上传bolb对象, 我现在这里把每个blob对象打印处理方便大家看到
// uploadFn(fileblob.slice(start, start + chunk))
start = start + chunk
}
console.log(fileblob.size)
console.log(arrupload)
})
</script>
在这里可以看， 文件被分成了46份
读取文件
FileReader()
想要读取Blob或者文件对象并转化为其他格式的数据，可以借助FileReader对象的API进行操作
FileReader.readAsText(Blob)：将Blob转化为文本字符串
FileReader.readAsArrayBuffer(Blob)： 将Blob转为ArrayBuffer格式数据
FileReader.readAsDataURL(): 将Blob转化为Base64格式的Data URL
使用例子
const reader = new FileReader()
reader.readAsText(response.data) // 以text文本显示
reader.onload = function(event) {
const { message } = JSON.parse(reader.result)
Massage.info(message) // 将错误信息显示出来
}
补充：MIME类型
用来表示 文件流/文档 用什么格式
浏览器用何种形式来处理URL
常见类型有
txt text/plain
doc application/msword
exe application/octet-stream
pdf application/pdf
ps application/postscript
xlm application/vnd.ms-excel
xls application/vnd.ms-excel
ppt application/vnd.ms-powerpoint
gz application/x-gzip
zip application/zip
mp3 audio/mpeg
wav audio/x-wav
bmp image/bmp
gif image/gif
jpe image/jpeg
jpeg image/jpeg
jpg image/jpeg
mpg video/mpeg
mov video/quicktime
使用场景：
前端请求后端的时候返回一个流文件，这时候可以判断流文件的类型， 来做出正确的处理
export const downloadEcxel = (imageUrl, name) => {
const token = store.getState().user.tokenHead + store.getState().user.token
axios.get(imageUrl, {
headers: {
'Authorization': token,
},
responseType: 'blob', // axios 添加blob type
})
.then(function(response) {
if (response.status >= 200 || response.status <= 300) {
let resData = response.data
if (resData.type === 'application/json') {
// 将blob文件流转换成json
const reader = new FileReader()
reader.readAsText(response.data) // 以text文本显示
reader.onload = function(event) {
const { code, message } = JSON.parse(reader.result)
console.log(message) // 将错误信息显示出来
}
} else {
// new Blob() 对返回的文件流类型处理
const blob = window.URL.createObjectURL(new Blob([resData], { type: 'application/ms-excel'}));
console.log(blob)
// 生成一个a元素
let a = document.createElement('a')
// 创建一个单击事件
let event = new MouseEvent('click')
// 图片名称
a.download = '订单数据报表' + new Date().getTime() + '.xlsx' // 默认的名称
// 将生成的URL设置为a.href属性
a.href = blob
a.dispatchEvent(event)
}
} else {
console.log('下载失败')
}
})
.catch(function(error) {
console.log(error);
});
}
有不对的大家可以留言，看到会回复
