首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从使用URL.createObjectURL创建的Blob URL中获取blob对象

,可以使用XMLHttpRequest或Fetch API进行网络请求,并通过响应的Blob对象获取blob数据。

  1. 首先,创建一个XMLHttpRequest对象或使用Fetch API来发送网络请求。以下是使用XMLHttpRequest发送GET请求的示例:
代码语言:txt
复制
var xhr = new XMLHttpRequest();
xhr.open('GET', 'blobURL');
xhr.responseType = 'blob';

xhr.onload = function() {
  if (xhr.status === 200) {
    var blob = xhr.response;
    // 在这里处理blob对象
  }
};

xhr.send();
  1. 如果使用Fetch API,可以使用以下代码获取blob对象:
代码语言:txt
复制
fetch('blobURL')
  .then(function(response) {
    if (response.ok) {
      return response.blob();
    }
    throw new Error('Network response was not ok.');
  })
  .then(function(blob) {
    // 在这里处理blob对象
  })
  .catch(function(error) {
    console.log('Error:', error);
  });

在这两种情况下,获得的blob对象可以用于进一步的处理,例如保存到本地,显示在页面上或进行其他操作。

对于blob对象的更多操作,可以参考Blob对象的相关文档:

腾讯云提供了一些与云计算相关的产品,如对象存储(COS)、云服务器(CVM)、容器服务(TKE)等,这些产品可以帮助您进行云计算的相关开发和部署。您可以访问腾讯云官方网站获取更多详细信息和产品介绍。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用FormData上传压缩裁剪后的图片Blob对象

到后端进行处理和保存 在前端将Base64字符串转换成二进制的Blob对象形式,再使用常规的文件上传形式(即FormData)来将其上传到后端 第一种方式对前端来说比较简单,主要的处理逻辑在后端。...FormData上传压缩裁剪后的图片Blob对象 Blob对象 */ function convertToBlob(base64Str, fileType) { var base64...生成的表单数据中,上传文件对应的filename会被设置为blob: ?...但是可能由于后端使用的不同框架或自己的逻辑代码的原因,对上传的文件名做了强制的后缀名检查,会发生报错导致上传失败,遇到这种情况,请记得使用上面的方式加上第三个参数,这样问题应该就能迎刃而解了。

3.4K30
  • 面试题:我现在上传图片的时候提前预览到图片怎么办?

    第二个参数:用于指定将要放入Blob中的数据的类型(MIME)(后端可以通过枚举MimeType,获取对应类型 Blob对象的基本属性: size :Blob对象包含的字节数。...1、首先第一步,我们得有一个视频网址,然后,我们通过ajax获取 2、第二部后台得给这个链接转化成一个二进制的流,我们用blob对象,给他装进去, 3、用URL.createObjectURL方法,生成一个...() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。...这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。...)依照js垃圾回收机制自动从内存中清理 URL.createObjectURL(blob)存在于当前document内,清除方式只有upload()事件或者revokeObjectURL手动清除 4

    1.5K10

    前端实现文件下载功能的三种方式

    URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。...这个新的URL 对象表示指定的 File 对象或 Blob 对象。 createObjectURL()支持传入 File 对象、Blob 对象或者 MediaSource 对象(媒体资源)。...(url) // 销毁 document.body.removeChild(a) } }, 注意:URL.createObjectURL()创建的对象使用完成后,即下载后可以通过URL.revokeObjectURL...理论上讲dom销毁时,URL.createObjectURL()创建的对象也会随之销毁,我们可以不必手动销毁。但当页面有类似表格形式的文件列表时,下载完文件立即手动销毁对象无疑是最好的选择。 3. ...读取操作为异步操作,当读取完成时,可以从onload回调函数中通过实例对象的result属性获取data:URL格式的字符串(base64编码),此字符串即为读取文件的内容,可以放入a标签的href属性中

    11.4K61

    关于 Blob

    [WechatIMG6.png] [WechatIMG5.png] Blob URL 就是以 blob: 开头的一段地址,指向的是一个二进制数据 使用 URL.createObjectURL(blob...Blob(blobParts[, options]) 返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成 参数说明: blobParts:数组类型,数组中的每一项连接起来构成 Blob...pdf'}); // 获取 Blob URL,可赋值到 a 标签 href 属性进行下载 const url = URL.createObjectURL(blob) 通过 Blob 生成文件、利用 Blob...URL 获取下载链接,这样就实现后端返回二进制格式的文件进行合并再下载 图片预览 较为简单,获取文件对象后,再通过 createObjectURL 方法得到 Blob URL 最后直接赋值到 img...只有一个视频地址怎么能将这个 URL 变成我们想要的 Blob URL 形式呢 从 ==URL.createObjectURL(blob)== 方法来看,首先要拿到存储这个视频原始数据的 Blob 对象

    2.7K10

    # 前端文件下载的正确打开方式

    这里主要的逻辑是当我们的请求成功后,我们会拿到响应体的response,这个response就是我们要下载的内容,然后我们把它转换成blob对象,然后通过URL.createObjectURL来创建一个...这里的知识点就有两个,一个是blob对象,一个是URL.createObjectURL。 # blob对象 Blob对象表示一个不可变、原始数据的类文件对象。...# URL.createObjectURL URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。...这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的 URL 对象表示指定的 File 对象或 Blob 对象。...这个方法是用来创建一个url的,它的作用是把一个blob对象转换成一个url,这个url可以用来下载文件,也可以用来预览文件,代码如下: const url = URL.createObjectURL(

    29040

    Vue中 实现文件流格式图片预览

    思路: 设置 axios responseType: 'blob';传送门:JavaScript Blob 对象详解 URL.createObjectURL() 创建一个 DOMString,包含一个表示参数中给出的对象的...() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的 URL。...这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。...Note: 此特性在 Web Worker 中可用; 注意: 此特性在 Service Worker 中不可用,因为它有可能导致内存泄漏; 语法:objectURL = URL.createObjectURL...(object); 参数:object 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象; 返回值:一个DOMString包含了一个对象URL,该URL可用于指定源

    2.7K20

    Blob

    我们不能直接在一个 Blob 中更改数据,但是我们可以对一个 Blob 进行分割,从其中创建新的 Blob 对象,将它们混合到一个新的 Blob 中。...; }); 当 fetch 请求成功的时候,我们调用 response 对象的 blob() 方法,从 response 对象中读取一个 Blob 对象,然后使用 createObjectURL() ...在浏览器中,我们使用 URL.createObjectURL 方法来创建 Blob URL,该方法接收一个 Blob 对象,并为其创建一个唯一的 URL,其形式为 blob:/、 中的 Blob,但如果你访问的 Blob URL 不再存在,则会从浏览器中收到 404 错误。 上述的 Blob URL 看似很不错,但实际上它也有副作用。...); }); 在示例中,我们通过调用 Blob 的构造函数来创建类型为 "text/plain" 的 Blob 对象,然后通过动态创建 a 标签来实现文件的下载。

    6.2K40

    富媒体在客服IM消息通信中的秒发实践

    2、采用的URL.createObjectURL(file) 获取到URL 在第一种方案被否定之后,又调研了URL.createObjectURL的实现。...采用的URL.createObjectURL(file) 获取到URL(这个URL对象表示指定的 File 对象或 Blob 对象),然后放到聊天数据的缓存中,便于快速发送到客服聊天窗口页面。...return url } 但在实际的使用场景中,只获取视频首帧信息是不够的,还要获取视频的宽高、播放时长等信息,并且通过网络请求发送给网关,最终在客户端展示。...获取到视频信息对象之后,再通过URL.createObjectURL(file)即可获取到视频相关的属性信息,如下: export function getVideoInfo(file, blob, msgid...(blob)获会创建一个DOMString,其中有包含了文件信息的URL(指定的 File 对象或 Blob 对象) 执行的时机的不同: createObjectURL是立即的执行 FileReader.readAsDataURL

    1.5K61

    前端下载文件的5种方法的对比

    优点 能解决不能直接下载浏览器可浏览的文件 缺点 得已知下载文件地址 不能下载跨域下的浏览器可浏览的文件 有兼容性问题,特别是IE 不能进行鉴权 利用Blob对象 该方法较上面的直接使用 a标签 download...利用 Blob对象可以将文件流转化成 Blob二进制对象。该对象兼容性良好,需要注意的是 IE10以下不支持。...在Safari浏览器上访问 BlobUrl或 ObjectURL是有缺陷的,如下文中通过 URL.createObjectURL生成的链接 第二点,这就导致这里以下的方案需留意适用于Safari的使用。...进行下载的思路很简单:发请求获取二进制数据,转化为 Blob对象,利用 URL.createObjectUrl生成url地址,赋值在 a标签的 href属性上,结合 download进行下载。...这时就需要两处注释的代码了,对返回的文本转化为 Blob对象,然后创建blob url,此时需要注释掉原本的 consturl=URL.createObjectURL(target.response)。

    7.4K63

    你不知道的 Blob

    我们不能直接在一个 Blob 中更改数据,但是我们可以对一个 Blob 进行分割,从其中创建新的 Blob 对象,将它们混合到一个新的 Blob 中。...; }); 当 fetch 请求成功的时候,我们调用 response 对象的 blob() 方法,从 response 对象中读取一个 Blob 对象,然后使用 createObjectURL() 方法创建一个...在浏览器中,我们使用 URL.createObjectURL 方法来创建 Blob URL,该方法接收一个 Blob 对象,并为其创建一个唯一的 URL,其形式为 blob:/、 中的 Blob,但如果你访问的 Blob URL 不再存在,则会从浏览器中收到 404 错误。 上述的 Blob URL 看似很不错,但实际上它也有副作用。...); }); 在示例中,我们通过调用 Blob 的构造函数来创建类型为 “text/plain” 的 Blob 对象,然后通过动态创建 a 标签来实现文件的下载。

    4.3K20

    JS 图片压缩

    压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...,可以是页面上获取的 DOM 对象,也可以是虚拟 DOM 中的图片对象。...base64 数据拆分后,通过 atob 方法解码 将解码后的数据转换成 Uint8Array 格式的无符号整形数组 转换后的数组来生成一个 Blob 数据对象,通过 URL.createObjectURL...// 构造函数允许通过其它对象创建 Blob 对象 new Blob([obj],{type:createType}) obj 字符串内容 createType 要构造的类型 兼容性 IE 10 以上...objectURL = URL.createObjectURL(object); object 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

    25.8K21

    浏览器端用JS创建和下载文件

    浏览器端用JS创建和下载文件 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...2 解决方案 2.1 下载取代加载:H5标签属性 HTML5 中 a 标签增加了 download 属性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome、firefox和opera...支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI 用js将内容生成文件可以仿照图片...,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

    4.8K120

    使用a标签下载文件

    可以使用或不使用 filename 值:如果没有指定值,浏览器会从多个来源决定文件名和扩展名:* `Content-Disposition`HTTP 标头。* URL的最后一段。...在函数内部,我们使用Blob构造函数将文件数据和类型传递给它,从而创建一个Blob对象。然后,我们使用URL.createObjectURL()方法创建一个URL,该URL指向Blob对象。...接下来,我们创建一个元素,并设置其href属性为之前创建的URL,并将下载属性设置为指定的文件名。然后将该元素添加到文档的body中。...在使用时,我们首先调用fileToBlob函数将文件数据转换为Blob对象。该函数返回一个Promise对象,在Promise的resolve回调中返回了转换后的Blob对象。...然后,我们使用这些字节数组创建一个Blob对象,并使用URL.createObjectURL()方法创建一个URL。

    1.6K20

    图片压缩原理

    压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...,可以是页面上获取的 DOM 对象,也可以是虚拟 DOM 中的图片对象。...base64 数据拆分后,通过 atob 方法解码 将解码后的数据转换成 Uint8Array 格式的无符号整形数组 转换后的数组来生成一个 Blob 数据对象,通过 URL.createObjectURL...// 构造函数允许通过其它对象创建 Blob 对象 new Blob([obj],{type:createType}) obj 字符串内容 createType 要构造的类型 兼容性 IE 10 以上...objectURL = URL.createObjectURL(object); object 用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。

    4.7K31

    浏览器端用JS创建和下载文件

    浏览器端用JS创建和下载文件 1 需求 前端需要把获取的数据生成文件让用户下载,按照以往生成 a 标签 href 指向目的文件,不仅需要有已经生成的文件服务器路径,而且很多浏览器支持类型的文件会默认加载而不提示用户选择路径下载...2 解决方案 2.1 下载取代加载:H5标签属性 HTML5 中 a 标签增加了 download 属csxiaoyao.com性,点击链接时浏览器不会打开链接指向的文件,而是改为下载(目前只有chrome...、firefox和opera支持),下载时会直接使用链接的名字来作为文件名(可给 download 加上文件名进行修改,如: download=“file.js”) 2.2 生成文件:DataURI 用...,可用浏览器新API(URL.createObjectURL)来解决,URL.createObjectURL 通常用来创建图片 DataURI 显示图片,这里用来下载文件,参数是 File对象(通过input...[type=file]选择的文件)或 Blob 对象(二进制大对象),让浏览器自动设定文件类型 解决类型限制:用 content 创建 ObjectURL 并赋值给 aLink 即可解决文件类型的限制

    14910

    用JS轻松实现一个录音、录像、录屏工具库

    今天就跟大家一起研究一下这个库的源码吧,从 0 到 1 来实现一个 React 的录音、录像和录屏功能。...然后将 mediaStream 传给 mediaRecorder,通过 ondataavailable 来存放当前流中的 blob 数据。...清除数据 在生成 blob url 的时候我们调用了 URL.createObjectURL API 来实现,生成后的 url 长这样: blob:http://localhost:3000/e571f5b7...-13bd-4c93-bc53-0c84049deb0a 每次 URL.createObjectURL 后都会生成一个 url -> blob 的引用,这样的引用也是会占用资源内存的,所以我们可以提供一个方法来销毁这个引用...getDisplayMedia 则用于获取屏幕的视频、音频流 录东西的本质是 stream -> blobList -> blob url,其中 MediaRecorder 可监听 stream 从而获取

    1.2K40
    领券