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

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

//或者

let url = URL.createObjectURL(blob) //将文件流转化成url  注意这个blob一般是通过读取后端接口文件流 设置 responseType: 'blob'  然后返回得到的blob
i_am_a_div_日积月累_
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中如何将图片的绝对路径转换成文件对象
12-14
将图片的绝对路径转换成base64编码，请看这篇文章 我们先来理解基本知识点： 1. 理解HTML5中的FileList对象与file对象。 在HTML5中，FileList对象表示用户选择的文件列表。通过添加multipe属性，file控件内允许一次...
文件流如何转换成url，三行代码搞定
weixin_44738158的博客
11-07 5167
文件流转换成URL
当后端接口使用文件流下载文件，前端通过blob转换url下载
西凉的悲伤博客
03-06 5108
当后端通过文件流的方式下载文件，其返回的是文件流 public CodeNoteResponse downloadFile(HttpServletResponse resp, String fileAddress, String fileName) { String fileDirName = fileAddress.endsWith("/") ? fileAddress + f...
前端获取服务器发送文件流转blob下载保存到本地
最新发布
xihadddd的博客
03-24 109
前端获取服务器发送文件流转blob下载保存到本地。
blob对象转换为blob(url)的问题
热门推荐
fhp1049377216的博客
09-29 1万+
这两天踩了一个坑与大家分享，同时记录自己的错误，由于公司业务的需求，需要把本地图片上传给后台，可是问题来了我的ajax发送了过去但是报了错，我问后台同事，他说我发送过去的东西源文件为空，问了后台才知道我不能直接发我本地获取的base64过去，要转成blob对象 function dataURItoBlob(base64Data) { var byteString; if(base64Data.sp...
js实现base64、url和blob之间相互转换的三种方式
weixin_64317807的博客
11-16 5048
Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式,需要的朋友可以参考下1.url: 一般来说，图片的显示还是建议使用url的方式比较好。12.base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。
java file 转URL_Java如何将文件转换为URL
weixin_39814393的博客
02-24 2861
在这篇文章中，将演示如何将java.io.File转换为java.net.URL，反之亦然。以下示例演示了将File转换为URL。文件：FileToUrlExample.java -package com.yiibai.tutorial.io;import java.io.File;import java.net.MalformedURLException;import java.net.URI;...
blob、url、base64相互转换
weixin_45630345的博客
03-23 1117
相互转换文章中有以下四种转换方式：以下两种可通过间接转换：
前端将blob转换为可下载的url及下载
qq_36566924的博客
11-27 2020
【代码】前端将blob转换为可下载的url。
后端接口返回的文件流，前端通过blob转换url下载文件(兼容ie)
weixin_42674490的博客
06-03 6378
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(() => {
【JavaScript】如何转换blob数据与file文件还有url
TA远方
01-05 7709
大家好，关于对象和对象有了解多少呢，它们都是一种文件的表示形式，文件之间是可以互相转换的，顺带一提，还有经常用到的临时文件路径。
js blob文件转url， base64转blob
q879936814的博客
01-04 8768
目前使用过两种方法 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
js如何获取图片url的Blob值并预览示例代码
01-21
File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 本文主要给大家介绍了关于js获取图片url的Blob值并预览的相关内容，下面话不多说了，来一起看看详细的介绍吧 方法如下 1）使用 ...
JavaScript中读取和保存文件实例
12-01
话说今天只是粗略浏览了一下Proxy SwitchySharp的源码，就收获了不少东西，其中就包括本文要介绍的读取和保存文件。因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了。而出于安全...
stream-file:小型JS库可通过XHR通过基于范围的分块抽象出大文件流
05-22
流文件 方便的类/ XHR包装器，用于从Web流式传输大文件。 支持使用HTTP'Range'标头在大文件内进行... 修复了在Safari中读取最后一个Blob URL的问题。 0.2.2-2017-12-05 修复了标题上不正确的空格擦洗 0.2.1-2017-1
Javascript图片上传前的本地预览实例
01-21
图片的上传预览功能主要用于图片上传前的一个效果的预览，目前主流的方法主要有js，jquery与flash实现，但我们一般都会使用js来...File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File
前端将FIile图片文件转成Url
月亮的博客
09-23 3069
在前端开发过程中，我们可能遇到需要将图片显现在页面上，但是又只能获取到图片的File文件，所以我们需要将File文件转换成页面可以识别的image URL。这时，我们可以采用FileReader（）方法来实现
Blob的三种应用场景及Blob，url，base64之间的转换
前端361
08-02 1万+
Blob是一种Javascript的对象类型，兼容到IE10 Blob对象表示一个不可变、原始数据的类文件对象。 Blob 表示的不一定是JavaScript原生格式的数据。 File接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 s...
推荐！！！前端将url转成blob和blob转成url；前端将文件流读取成url；前端将blob文件读取出url预览和下载
i_am_a_div的博客
07-07 9194
前端将url转成blob和blob转成url；前端将文件流读取成url；前端将blob文件读取出url预览和下载
webview如何支持文件流blob
09-25
要在WebView中支持文件流（Blob），您需要按照以下步骤进行操作： 1. 将文件流转换为Blob对象。您可以使用FileReader API中的readAsArrayBuffer或readAsDataURL方法来读取文件并将其转换为Blob对象。 ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.pdf', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (this.status == 200) { var blob = new Blob([this.response], {type: 'application/pdf'}); // Use the blob object to display the PDF in WebView } }; xhr.send(); ``` 2. 将Blob对象转换为Base64编码的数据URL。您可以使用URL.createObjectURL方法将Blob对象转换为URL，然后使用XMLHttpRequest或Fetch API将该URL传递给WebView。 ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.pdf', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var blob = this.response; var reader = new FileReader(); reader.onloadend = function() { var base64data = reader.result; // Use the base64data to display the PDF in WebView }; reader.readAsDataURL(blob); } }; xhr.send(); ``` 3. 在WebView中加载Base64编码的数据URL。您可以使用WebView的loadData或loadDataWithBaseURL方法将Base64编码的数据URL加载到WebView中。 ``` webView.loadData(base64data, 'application/pdf', 'base64'); ``` 注意：在使用Blob对象和Base64编码的数据URL时，请确保WebView的JavaScriptEnabled属性设置为true，以允许JavaScript代码在WebView中运行。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值