将文件流blob或文件file读取成url

已于 2022-09-30 15:47:45 修改
阅读量3.3k 收藏 4
点赞数
分类专栏： 文件 图片
于 2022-09-29 11:26:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_a_div/article/details/127103841
版权

文件转换 URL Blob 前端开发 文件流
关键词由CSDN通过智能技术生成 
let url = URL.createObjectURL(file.raw) //将文件转化成url

//或者

let url = URL.createObjectURL(blob) //将文件流转化成url  注意这个blob一般是通过读取后端接口文件流 设置 responseType: 'blob'  然后返回得到的blob
i_am_a_div_日积月累_
关注
专栏目录
HTML5 File接口在web页面上使用文件下载
09-28
`createObjectURL`方法从File或Blob对象创建一个URL，这个URL可以在页面上用于链接或图片资源，直到它被释放（通过`URL.revokeObjectURL`）。 总的来说，HTML5的File接口极大地扩展了Web应用程序处理本地文件的能力...
获取文件blob流地址实现下载功能
开源世界
08-11 2532
应用场景 该功能主要是通过读取文件流，处理blob流为浏览器识别地址并返回回调处理方法,来处理一些通用的post下载功能或者获取blob流地址进行其他操作的功能。 例如：pdf预览 解决方案 方案一 说明: 统一处理获取blob流地址与post形式下载功能结合为一个方法处理 引入filesBlobDeal处理方法 import { filesBlobDeal } from '@/utils/common'; 复制代码 调用filesBlobDeal处理方法 let fileObj = { reqTy
blob、url、base64相互转换
weixin_45630345的博客
03-23 1316
相互转换文章中有以下四种转换方式：以下两种可通过间接转换：
数据URL（base64格式）、blob、File对象（文件流）相互转换
工作中遇到问题记录
09-26 266
数据URL（base64格式）、blob、File对象（文件流）相互转换
文件流如何转换成url，三行代码搞定
weixin_44738158的博客
11-07 6127
文件流转换成URL
前端将blob转换为可下载的url及下载
qq_36566924的博客
11-27 3337
【代码】前端将blob转换为可下载的url。
js实现base64、url和blob之间相互转换的三种方式
weixin_64317807的博客
11-16 7349
Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式,需要的朋友可以参考下1.url: 一般来说，图片的显示还是建议使用url的方式比较好。12.base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。
后端接口返回的文件流，前端通过blob转换url下载文件(兼容ie)
weixin_42674490的博客
06-03 6642
1.接口请求： 注意：responseType:’blob’要加上，这样就会返回Blob对象 let params = { id: 1, name: '李四' } this.$axios.post('/xxxx', params, { responseType: 'arraybuffer' }).then(res => { if (res.data) { this.fileDownLoad(res.data, 'text.xlsx') } }).catch(() => {
html5中如何将图片的绝对路径转换成文件对象
12-14
将图片的绝对路径转换成base64编码，请看这篇文章 我们先来理解基本知识点： 1. 理解HTML5中的FileList对象与file对象。 在HTML5中，FileList对象表示用户选择的文件列表。通过添加multipe属性，file控件内允许一次...
java,Blob字段操作,将图片或者文件保存到数据库中.zip
02-01
以上就是Java中Blob字段操作的基本流程，通过这些步骤，你可以成功地将图片或文件保存到数据库中，并能从数据库中读取和恢复这些数据。在实际开发中，根据具体需求，可能还需要处理异常、事务管理和资源关闭等问题，...
JavaScript读二进制文件并用ajax传输二进制流的方法
10-21
在JavaScript中，处理二进制文件并使用Ajax传输二进制流是一项常见的任务，尤其是在进行文件上传或数据传输时。由于浏览器之间的差异，实现这一功能需要考虑不同的API和兼容性问题。以下是一份详细的指南，涵盖了...
vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式
04-22
当后端服务器处理文件上传并返回流数据时，前端需要能够接收这些流数据并将其转化为可预览或下载的格式，例如PDF。以下是三种在VueCLI3.0项目中实现PDF预览的方法： 1. **使用PDF.js库** PDF.js是Mozilla维护的一...
【JavaScript】如何转换blob数据与file文件还有url
落叶随风将要去远方，看沿途的风景回忆一场...
01-05 9152
大家好，关于对象和对象有了解多少呢，它们都是一种文件的表示形式，文件之间是可以互相转换的，顺带一提，还有经常用到的临时文件路径。
blob对象转换为blob(url)的问题
热门推荐
fhp1049377216的博客
09-29 1万+
这两天踩了一个坑与大家分享，同时记录自己的错误，由于公司业务的需求，需要把本地图片上传给后台，可是问题来了我的ajax发送了过去但是报了错，我问后台同事，他说我发送过去的东西源文件为空，问了后台才知道我不能直接发我本地获取的base64过去，要转成blob对象 function dataURItoBlob(base64Data) { var byteString; if(base64Data.sp...
js blob文件转url， base64转blob
q879936814的博客
01-04 9294
目前使用过两种方法 URL.createObjectUrl(blob)：这个方法便捷，且是同步的，但需要基于当前的内存，换句话说，这个url不能拿到其他页面使用。 let url = URL.createObjectUrl(blob) img.src = url FileReader.readAsDataURL(blob)：这个方法是异步的，转化成base64，可以放到其他页面使用。 let fr = new FileReader() fr.readAsDataURL(blob) fr.onlo
前端将后端返回的文件流转成url
正一品程序员的博客
08-25 3520
前端将后端返回的文件流转成url
推荐！！！前端将url转成blob和blob转成url；前端将文件流读取成url；前端将blob文件读取出url预览和下载
i_am_a_div的博客
07-07 1万+
前端将url转成blob和blob转成url；前端将文件流读取成url；前端将blob文件读取出url预览和下载
file、base64、blob、url之间的转换
lsy173176的博客
12-23 655
上传、下载文件必须知道的file、base64、blob、url之间的转换
文件流转换为url
weixin_58032613的博客
10-16 1786
文件流转换成url
blob转换成file文件
最新发布
10-18
Blob (Binary Large Object) 是一种在浏览器环境中表示二进制数据的对象，通常用于存储图片、音频或视频等非文本数据。当你需要将 Blob 数据转换为可以直接使用的 File 对象以便上传到服务器或操作文件系统时，可以按照以下步骤进行： 1. **创建File对象**: 可以通过`File`构造函数和Blob对象创建一个新的File对象，例如： ```javascript let file = new File([blob], fileName, {type: blob.type}); ``` 这里，`[blob]`是一个Blob实例，`fileName`是你想要给新文件起的名字，`{type: blob.type}`设置了新的File对象的MIME类型。 2. **读取文件内容**: 如果你想直接获取Blob转换后的File的内容，可以使用`URL.createObjectURL()`生成一个临时的URL，然后从这个URL读取数据： ```javascript let url = URL.createObjectURL(file); fetch(url) .then(response => response.arrayBuffer()) .then(arrayBuffer => { // 现在你可以处理arrayBuffer，比如将其写入到服务器或本地文件 }) .catch(error => console.error(error)) .finally(() => URL.revokeObjectURL(url)); // 清理URL引用 ``` 3. **保存到本地**: 如果你想让用户下载这个文件，可以直接提供下载链接： ```javascript const downloadLink = document.createElement('a'); downloadLink.href = url; downloadLink.download = fileName; document.body.appendChild(downloadLink); downloadLink.click(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值