云南龙网

  1. 首页 > 云知道 > >

ea7是什么意思 ea7是什么意思网络用语( 二 )

云知道网络


MDN BlobMDN ArrayBuffer阮一峰js标准参考教程二进制数组URL.createObjectURL
video标签，audio标签还是img标签的src属性 ， 不管是相对路径，绝对路径，或者一个 *** 地址，归根结底都是指向一个文件资源的地址 。既然我们知道了Blob其实是一个可以当作文件用的二进制数据，那么只要我们可以生成一个指向Blob的地址 ， 是不是就可以用在这些标签的src属性上 ， 答案肯定是可以的，这里我们要用到的就是URL.createObjectURL() 。
const objectURL = URL.createObjectURL(object); //blob:http://localhost:1234/abcedfgh-1234-1234-1234-abcdefghijkl复制代码这里的object参数是用于创建URL的File对象、Blob 对象或者 MediaSource 对象，生成的链接就是以blob:开头的一段地址，表示指向的是一个二进制数据 。
其中localhost:1234是当前网页的主机名称和端口号，也就是location.host，而且这个Blob URL是可以直接访问的 。需要注意的是，即使是同样的二进制数据，每调用一次URL.createObjectURL ***  ， 就会得到一个不一样的Blob URL 。这个URL的存在时间，等同于网页的存在时间 ， 一旦网页刷新或卸载，这个Blob URL就失效 。
通过URL.revokeObjectURL(objectURL) 释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象 。当你结束使用某个 URL 对象之后，应该通过调用这个 *** 来让浏览器知道不用在内存中继续保留对这个文件的引用了,允许平台在合适的时机进行垃圾收集 。
如果是以文件协议打开的html文件（即url为file://开头），则地址中http://localhost:1234会变成null ， 而且此时这个Blob URL是无法直接访问的 。
实战一：上传图片预览
有时我们通过input上传图片文件之前 ， 会希望可以预览一下图片，这个时候就可以通过前面所学到的东西实现，而且非常简单 。
html
<input id="upload" type="file" /><img id="preview"alt="ea7是什么意思 ea7是什么意思网络用语"/>javascript
const upload = document.querySelector("#upload");const preview = document.querySelector("#preview");upload.onchange = function() { const file = upload.files[0]; //File对象 const src = http://www.fzline.cn/sh/URL.createObjectURL(file);preview.src = src;};这样一个图片上传预览就实现了，同样这个 *** 也适用于上传视频的预览 。
实战二：以Blob URL加载 *** 视频
现在我们有一个 *** 视频的地址，怎么能将这个视频地址变成Blob URL是形式呢，思路肯定是先要拿到存储这个视频原始数据的Blob对象 ， 但是不同于input上传可以直接拿到File对象 ， 我们只有一个 *** 地址 。
我们知道平时请求接口我们可以使用xhr（jquery里的ajax和axios就是封装的这个）或fetch，请求一个服务端地址可以返回我们相应的数据，那如果我们用xhr或者fetch去请求一个图片或视频地址会返回什么呢？当然是返回图片和视频的数据，只不过要设置正确responseType才能拿到我们想要的格式数据 。
function ajax(url, cb) { const xhr = new XMLHttpRequest(); xhr.open("get", url); xhr.responseType = "blob"; // ""|"text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象 xhr.onload = function() { cb(xhr.response); }; xhr.send();}注意XMLHttpRequest和Fetch API请求会有跨域问题，可以通过跨域资源共享(CORS)解决 。
看到responseType可以设置blob和arraybuffer我们应该就有谱了，请求返回一个Blob对象，或者返回ArrayBuffer对象转换成Blob对象，然后通过createObjectURL生成地址赋值给视频的src属性就可以了,这里我们直接请求一个Blob对象 。
ajax('video.mp4', function(res){ const src = http://www.fzline.cn/sh/URL.createObjectURL(res);video.src = src;})用调试工具查看视频标签的src属性已经变成一个Blob URL，表面上看起来是不是和各大视频网站形式一致了，但是考虑一个问题，这种形式要等到请求完全部视频数据才能播放，小视频还好说，要是视频资源大一点岂不爆炸，显然各大视频网站不可能这么干 。

推荐阅读


上一篇：梦到喜欢的人抱自己 梦到喜欢的人抱自己是什么意思

下一篇：外墙保温板的优点是什么 外墙保温板的优点是什么呢