JavaScript blob类型转file类型以及ie不兼容file的处理

最新推荐文章于 2023-02-20 17:42:01 发布
最新推荐文章于 2023-02-20 17:42:01 发布
阅读量1.9k 收藏 4
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43969975/article/details/102720213
版权

JavaScript blob类型转file类型

var file = new File([blob], filename, {type: contentType, lastModified: Date.now()});

ie不支持new file()函数，可以直接在formdata函数里面增加一个参数解决问题
formData.append(“files”, file ,new Date() + “.jpg”);

曾伦伦
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
JS 下载文件方法分享(解决图片文件无法直接下载和 IE兼容问题)
weixin_34161064的博客
10-11 1095
场景简介 由于业务需要，经常遇到下载各类文件的需求，其中最头疼的莫过于前端下载图片了，直接给个图片文件地址会变成直接打开图片，而不是弹窗提示另存为，研究了下前端实现文件下载最便捷的方法还是创建 a 标签，写入download 属性实现点击下载，但这在 ie 浏览器上的实现又与一般浏览器不同，于是摸索之后写了个通用的下载方法，既可用来下载文件也可下载图片，希望能够帮到大家。 npm 安装使用 ...
js实现图片转base64(兼容IE8+)
web前端开发
04-13 1万+
最近做电商项目，遇到如下一个需求： 商品评价页面：用户上传图片，点击“”确定“”前，图片由前端实现base64转码（ps:由于商品评价页面可能存在多个产品，每个产品评价又可上传多张图片，所有前端img 转码可以有效的优化http请求，减小服务器的压力） 下面我们一步一步来看看demo代码： （1）定义一个隐藏的input[type = 'file']，通过按钮触发其change事件
随笔-前端文件操作 File, Blob, ArrayBuffer 以及FileReader
伏城之外的博客
12-30 3366
前端文件操作 浏览器由于安全性要求，不允许JS直接获取主机的文件系统上的文件，只能通过HTML标签input[type=file]来由用户选择可以被浏览器操作的文件。 那么input[type=file]标签选择的文件，会被如何保存呢？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
new Blob()详解以及blob转file
热门推荐
weixin_47818125的博客
01-06 2万+
blob详解以及blob转file
IE浏览器new File不兼容问题解决
q879936814的博客
02-22 1629
重写File let File = window.File try { new File([], '') } catch(e) { File = class File extends Blob { constructor(chunks, filename, opts = {}){ super(chunks, opts) this.lastModifiedDate = new Date() this.lastModified =+ this.lastMod
vue 后台输出文件流,blob导出文件并兼容ie
qq469234155的博客
12-15 523
导出文件并兼容ie exportGoodsExcel() { this.axios({ url: "/exportGoodsExcel", method: "post", responseType: 'blob', //文件流数据一定要写 data: { body: { goodsSts: "1", pageSize: t
JavaScript blob类型转file类型
weixin_34174422的博客
01-02 4048
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], f...
JS下blob类型转file文件
m0_67291862的博客
02-20 1749
JS下blob类型转file文件
JavaScript Blob对象原理及用法详解
01-18
Blob是JavaScript内建对象，表示不可变的原始数据，类似文件的对象。 blob是表示原始数据的不可变对象，这些数据不一定是JavaScript原生格式的，文件接口基于Blob，继承Blob功能并将其扩展为支持用户系统上的文件。 ...
javascript使用Blob对象实现的下载文件操作示例
11-20
Blob是一个类文件的不可变的原始数据对象，非javascript原生数据类型，File对象就是继承自Blob对象，且在Blob的基础上进行扩展，以便支持用户系统上的文件。 前言 最近在做以post请求方式导出excel时，想到了可以...
JAVA中SQLlite数据库BLOB数据类型的存取.docx
09-30
JAVA 中 SQLlite 数据库 BLOB 数据类型的存取 JAVA 中 SQLlite 数据库 BLOB 数据类型的存取是指在 JAVA 语言中使用 SQLlite 数据库来存储和读取大型二进制对象（BLOB），以便实现文件存储和读取的功能。本文将详细...
javascript实现的图片预览和上传功能示例【兼容IE 9】
11-21
本文实例讲述了javascript实现的图片预览和上传功能。分享给大家供大家参考，具体如下： 下载DEMO：https://github.com/CaptainLiao/zujian/tree/master/Upload 对于现代浏览器来说，要实现图片预览非常简单： 1、...
react-image-file-resizer:使用React调整本地图像的大小
04-30
它返回调整大小后的图像的新base64 URI或Blob。 URI可用作组件的源。 设置 安装软件包： npm i react-image-file-resizer 或者 yarn add react-image-file-resizer 用法 import Resizer from "react-image-file-...
blob没权限 ie_IE浏览器对象不支持Blob属性或方法，IE浏览器不支持canvas toBlob()方法的Polyfill...
weixin_28684449的博客
01-17 1596
前言：由于有裁剪图像的需求，所以就应用了Cropper.js插件，但是在IE浏览器就爆出了兼容blob问题。解决方案：其实在https://www.canvasapi.cn/HTMLCanvasElement/toBlob#&othersCanvas中文官网官方网站有给出IE浏览器的兼容解决方案。兼容：首先，toBlob()方法IE9浏览器不支持，因为Blob数据格式IE10+才支持。然后...
Blob,File,ArrayBuffer和FileReader
qq_34516556的博客
08-18 536
以下兼容性IE10+ FormData FormData对象的作用就类似于这里的serialize()方法 function sentComment() { var url = $("#albumItemCommentURL").val(); var params = {"mediaType": 3}; var audioBase64Data =...
vue开发中上传文件时IE的兼容问题
qq_42103673的博客
07-27 766
const file = new File([blobInfo.blob()], blobInfo.filename(), { type: 'image/*', }) new File 对象ie不支持问题；需要使用 new FormData() 替换 const formData = new FormData() // 服务端接收文件的参数名，文件数据，文件名 ..
new File的兼容性问题
q140948940的博客
09-28 2621
今天遇到了有客户说在edge浏览器下无法上传图片的问题，寻找了个老的edge浏览器测了一下，果然不行，原因是new File在老版edge上不支持，当然ie也不用想了，解决方案是采用blob上传 // base64 转 files 这是原来的写法 dataURLtoFile(dataURI, fileName) { var arr = dataURI.split(','); var byteString = atob(arr[1]); var mime = arr[0].matc
数据库管理工具:dbeaver-ce-23.1.5-macos-aarch64.dmg
最新发布
06-16
1.DBeaver是一款通用数据库工具，专为开发人员和数据库管理员设计。 2.DBeaver支持多种数据库系统，包括但不限于MySQL、PostgreSQL、Oracle、DB2、MSSQL、Sybase、Mimer、HSQLDB、Derby、SQLite等，几乎涵盖了市场上所有的主流数据库。 3.支持的操作系统：包括Windows（2000/XP/2003/Vista/7/10/11）、Linux、Mac OS、Solaris、AIX、HPUX等。 4.主要特性： 数据库管理：支持数据库元数据浏览、元数据编辑（包括表、列、键、索引等）、SQL语句和脚本的执行、数据导入导出等。 用户界面：提供图形界面来查看数据库结构、执行SQL查询和脚本、浏览和导出数据，以及处理BLOB/CLOB数据等。用户界面设计简洁明了，易于使用。 高级功能：除了基本的数据库管理功能外，DBeaver还提供了一些高级功能，如数据库版本控制（可与Git、SVN等版本控制系统集成）、数据分析和可视化工具（如图表、统计信息和数据报告）、SQL代码自动补全等。
BlobUrl转file
12-28
可以使用以下代码将BlobUrl转换为File对象： ```javascript function blobUrlToFile(blobUrl) { return fetch(blobUrl) .then(response => response.blob()) .then(blob => { const filename = blobUrl.split('/').pop(); return new File([blob], filename); }); } ``` 这段代码首先使用fetch函数获取Blob对象，然后使用blob()方法将响应转换为Blob对象。接下来，我们从BlobUrl中提取文件名，并使用File构造函数创建一个新的File对象，将Blob对象和文件名作为参数传递进去。 你可以使用上述函数将BlobUrl转换为File对象。例如： ```javascript const blobUrl = 'blob:http://localhost:...'; blobUrlToFile(blobUrl) .then(file => { console.log(file); // 在这里可以使用File对象进行进一步的操作 }) .catch(error => { console.error(error); }); ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值