JS中Blob对象转File对象

最新推荐文章于 2024-12-20 16:12:50 发布
原创 最新推荐文章于 2024-12-20 16:12:50 发布 · 3.7k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #html5

本文介绍如何使用MDN文档中的File API创建一个名为'ex.mp3'的MP3文件。通过构造函数new File()，传入Blob对象、文件名和MIME类型'audio/mpeg'来实现。

MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/File/File

let mp3File = new File([blob], 'ex.mp3', {type: 'audio/mpeg'});
JavaScript - Blob / File / base64 使用场景介绍与相互转换
🏆 前端领域优质创作者
04-26 4133
前言 本文首先介绍一下这三种对象使用场景，最后介绍下它们之间互转格式的解决方案。 您前端一旦涉及到文件或图片上传到服务器， 就势必离不了Blob/File/base64三种主流的类型。 Blob MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Blob 您可以观察到，像一些图片处理插件（例如有名的vue-cropper）图片裁剪插件， 它们将图片处理完毕后，都将使用blob对象返回处理好的图片，供开发者用于上传服务器。
javascript使用Blob对象实现的下载文件操作示例
11-20
在JavaScript中，Blob对象用于表示不可变的原始数据，它不是JavaScript的内置数据类型，而是用来处理二进制数据的一种方式。Blob对象是File对象的基类，File对象则专门用于处理用户系统上的文件。Blob对象可以接收一...
上传200G文件
Mr_Zang666的博客
08-16 3824
最近遇见一个需要上传百G大文件的需求，调研了七牛和腾讯云的切片分段上传功能，因此在此整理前端大文件上传相关功能的实现。 在某些业务中，大文件上传是一个比较重要的交互场景，如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大，或者网络条件不好时，上传的时间会比较长（要传输更多的报文，丢包重传的概率也更大），用户不能刷新页面，只能耐心等待请求完成。 下面从文件上传方式入手，整理...
JavaScript 文件对象详解
WLANQY的博客
01-11 1093
在浏览器中操作文件，多数情况下用到的是 File 对象，从 元素获取，进而继续操作(例如将选择的图片展示在页面上，用ajax将文件上传至服务器等)。这里介绍在浏览器中操作文件的相关API.File 对象继承自 Blob 对象，先看看 Blob 对象。
JS下blob类型转file文件
m0_67291862的博客
02-20 2019
JS下blob类型转file文件
使用js将blob对象转file对象
热门推荐
x先生的博客
03-08 4万+
在做图片裁剪上传的需求时，后端使用统一的文件上传接口，要求前端做图片裁剪。 前端裁剪上传图片组件开发会单独一篇文章总结，写完后会在此处链接过去。 前端裁剪图片后获取的实际是blob对象，后端统一的文件上传接口实际接收的file对象，前端需要在数据提交前将blob对象转为file对象。转换方法如下： 使用file()构造函数。 const files = new window.File( [...
JavaScript Blob对象原理及用法详解
10-14
JavaScript中的Blob对象是一种用于处理二进制大数据的内建对象，它代表了不可变的原始数据，这些数据可能不是JavaScript的原生格式。Blob对象在Web开发中扮演着重要角色，尤其是在处理文件、图片、音频或视频等大量...
js实现把图片的绝对路径转为base64字符串、blob对象再上传
01-19
JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传。 用处： 从本地选择图片上传，如项目规定只能选择本项目文件夹下的图像上传为头像等。 主要思想： 使用canvas.toDataURL()方法将...
js中关于Blob对象的介绍与使用
10-15
在JavaScript中，Blob对象是一种包含有只读原始数据的类文件对象。它通常被用于操作二进制数据，例如音频、视频等文件。本文将详细介绍Blob对象的创建、属性以及相关方法，并展示如何利用这些知识实现文件的分片上传...
JavaScript blob类型转file类型
xiaoran_1997的博客
05-06 6769
var blob = new Blob(byteArrays, { type: contentType }); //blob转file var file = new File([blob], filename, {type: contentType, lastModified: Date.now()}); //或者 var file = new File([byteArrays], filename, {type: contentType, lastModified: Date.now()}); 注：该.
js blob转File
zhoudekuai的专栏
03-08 2万+
由于Edge浏览器不支持new File，所以要先将dataURL转换成blob再转成File，但按照网上程序的转换后，用ajax上传到服务器，在服务器获取到的文件名一直都是blob，而不是设置的文件名，多方查找到发现只要在提交表单append方法后跟文件名就可以了。 function dataURLtoBlob(dataurl) { var arr = dataur...
js生成文件file对象，blob和file相互转换
持斧三笑
02-11 4万+
blob转成file
js各种数据流之间的格式转换（blob、file、DataURL、canvas、ArrayBuffer）
曹定栓的博客
12-30 1万+
js各种数据流之间的格式转换（blob、file、DataURL、canvas、ArrayBuffer）
js blob 转 file_Node.js架构剖析
weixin_39569753的博客
11-20 124
一.Node.js 缔造的传奇I have a job now, and this guy is the reason why I have that now. His hobby project is what I use for living. Thanks. —— Shajan Jacob2009 年 Ryan Dahl 在 JSConf EU 大会上推出了 Node.js，最初是希望能够通...
【JavaScript】如何转换blob数据与file文件还有url
落叶随风将要去远方，看沿途的风景回忆一场...
01-05 9980
大家好，关于对象和对象有了解多少呢，它们都是一种文件的表示形式，文件之间是可以互相转换的，顺带一提，还有经常用到的临时文件路径。
js 中 blob对象 和 file 对象的区别及相互转换
最新发布
yjh_OK的博客
12-20 1657
Blob是一个通用的二进制数据容器，不包含文件的元数据；而File是Blob的扩展，代表着带有元数据的文件，通常与文件操作相关。从Blob转换为File需要通过File构造函数，将Blob对象作为数据部分传入。从File转换为Blob可以直接使用File对象本身，因为File本质上是Blob的一个子类。如果需要创建新的Blob，可以使用方法。
js的File对象，Blob和file相互转换
初心
11-16 1308
js的File对象，Blob和file相互转换。
javascript文件格式转换 base64转file，file转base64，base64转blob，blob转换为file
paipaicui的博客
01-17 814
【代码】文件格式转换 base64转file，file转base64，base64转blob，blob转换为file。
JavaScript中Blob与File对象转换及文件上传实现
本文围绕“Blob与File转换代码[项目源码]”这一主题，深入剖析JavaScript中Blob对象与File对象之间的相互转换机制，并结合实际应用场景，详细阐述其技术原理、实现方式及在文件上传流程中的关键作用。 首先，理解...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值