Fetch API 提供了用于获取资源(包括通过网络)的接口。fetch提供了request和response对象(以及网络请求所涉及的其他内容)的通用定义。(引用MDN)
使用fetch读取一个图片文件,添加到页面中
//index.html
<button id="btn">read</button>
<script>
var readBtn = document.getElementById('btn');
readBtn.onclick = async function(){
var res = await fetch('image/test.png');
console.log(res, '111');
fetchFileBlob(res)
};
//异步读取文件
async function fetchFileBlob(file){
var dataBlob = await file.blob();
//把取到的二进制文件转换成可解析的URL
var url = URL.createObjectURL(dataBlob);
//初始化一个Image()实例
var img = new Image();
img.src = url;
//把img实例添加到body体中
document.getElementsByTagName('body')[0].appendChild(img);
console.log(dataBlob, '二进制内容');
}
</scirpt>