位置: IT常识 - 正文

前端FileReader对象实现图片file文件转base64(前端file对象)

编辑:rootadmin
前端FileReader对象实现图片file文件转base64 1、file转base64具体代码// 图片file转base64方法(file文件,回调函数) fileToBase64(file, callback) { // 创建FileReader对象(不兼容IE) let reader = new FileReader(); // 将file转为base64 (异步操作) reader.readAsDataURL(file); // 转换成功 reader.onload = () => { const response = { status: true, data: reader.result } callback(response); }; // 转换失败 reader.onerror = function () { const response = { status: false, data: reader.error } callback(response); }; }// 调用方法fileToBase64(imgFile, (res) => { if(res.status) { console.log('file转化成base64成功---',res.data) } else { console.log('file转化base64失败---',res.data) }})2、原理解析

推荐整理分享前端FileReader对象实现图片file文件转base64(前端file对象),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端file对象,前端no such file or directory,前端 formdata,前端读取文件内容,前端读取文件内容,前端读取文件内容,前端读取文件内容,前端file对象,内容如对您有帮助,希望把文章链接给更多的朋友!

​ 上面封装的方法,其原理主要是借助FileReader对象来实现图片格式的转换,FileReader对象中的readAsDataURL()方法,可以读取一个File或Blob类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过readAsDataURL()方法去读取一个文件时,属于异步操作,因此我们需要在FileReader对象的onload事件或onerror事件中,通过回调函数的方式,将文件类型转换的结果,传递给方法的调用者。

​ 还有最重要的一点:该方法不兼容IE。

3、FileReader对象

​ FileReader对象可以异步的读取用户计算机上文件,但仅限于以安全的方式(通过<input>、DataTransfer等方式获取文件后),读取对应的File或Blob类型的文件,并不能按照文件路径去用户的存储的读取对应文件。

浏览器兼容性:

① 创建FileReader对象的方法只有一种,那就是构造函数:// 创建FileReader对象let reader = new FileReader();② 常用属性

​ error:表示当读取文件发生错误时,返回的错误信息。

前端FileReader对象实现图片file文件转base64(前端file对象)

​ readyState:表示目前FileReader对象的状态,值有三个:0—未读取任何数据、1—正在读取数据、2—数据读取完成或被终止。

​ result:表示文件读取并转换格式后的结果,结果的格式取决于使用的读取方法。

③ 对象事件

​ onload:该事件在读取操作完成时触发,此时可以通过reader.result拿到文件读取并转换格式后的结果。

​ onerror:该事件在读取操作才发生错误时触发此时可以通过reader.error拿到对应的错误信息。

​ onabort:该事件在读取操作被中断时触发。

④ 常用方法

​ readAsDataURL(file):读取一个file或Blob文件,并将其转换为base64格式,存储在reader.result。

​ readAsArrayBuffer(file):读取一个file或Blob文件,并将其转换为ArrayBuffer格式,存储在reader.result。

​ readAsText(file[,encoding]):读取一个file或Blob文件,并将其按照第二个参数设置的编码类型转换为字符串格式(默认为UTF-8格式),存储在reader.result。

​ abort():终止正在进行的读取操作。

4、相关文档

FileReader 前端借助Canvas实现压缩图片两种方法 前端将base64图片转换成file文件

本文链接地址:https://www.jiuchutong.com/zhishi/294514.html 转载请保留说明!

上一篇:【控制】自适应控制基本概念(什么叫自适应控制)

下一篇:手把手YOLOv5输出热力图(yolov5输出参数)

  • win10定时开关机在哪里设置(win10定时开关机软件)

    win10定时开关机在哪里设置(win10定时开关机软件)

  • 淘宝如何追加评论(淘宝如何追加评论视频)

    淘宝如何追加评论(淘宝如何追加评论视频)

  • ios13可以分屏吗(苹果13可以分屏操作吗)

    ios13可以分屏吗(苹果13可以分屏操作吗)

  • 手机闪屏是怎么回事(手机闪屏是怎么修复)

    手机闪屏是怎么回事(手机闪屏是怎么修复)

  • R17外屏玻璃碎了(r17pro换外屏视频)

    R17外屏玻璃碎了(r17pro换外屏视频)

  • 小米8怎么拍出长曝光照片(小米8怎么拍出星星)

    小米8怎么拍出长曝光照片(小米8怎么拍出星星)

  • 微信号被注销(微信号被注销了怎么找回)

    微信号被注销(微信号被注销了怎么找回)

  • 小米蓝牙耳机声音小(小米蓝牙耳机声音小的解决方法)

    小米蓝牙耳机声音小(小米蓝牙耳机声音小的解决方法)

  • 淘宝退货小纸条怎么写(淘宝退货小纸条是什么意思)

    淘宝退货小纸条怎么写(淘宝退货小纸条是什么意思)

  • 微信号可以用什么符号(微信号可以用什么注册)

    微信号可以用什么符号(微信号可以用什么注册)

  • 手机屏幕录制下载什么软件(手机屏幕录制后的视频在哪)

    手机屏幕录制下载什么软件(手机屏幕录制后的视频在哪)

  • 你所拨打的号码已过期是什么意思(你所拨打的号码正在通话中)

    你所拨打的号码已过期是什么意思(你所拨打的号码正在通话中)

  • 苹果7网络不稳定怎么办(苹果网络不稳定怎么回事)

    苹果7网络不稳定怎么办(苹果网络不稳定怎么回事)

  • 抖音集字没有发(抖音发字集齐图片)

    抖音集字没有发(抖音发字集齐图片)

  • 为什么流量卡显示2g(为什么流量卡显示一个叉)

    为什么流量卡显示2g(为什么流量卡显示一个叉)

  • 光信号闪红灯多久能好(光信号闪红灯多久能恢复正常)

    光信号闪红灯多久能好(光信号闪红灯多久能恢复正常)

  • qq为什么扩列匹配失败(为什么qq扩列一直显示上限)

    qq为什么扩列匹配失败(为什么qq扩列一直显示上限)

  • 域名服务的主要功能是(购买域名的网站)

    域名服务的主要功能是(购买域名的网站)

  • 怎么消除微信账单记录(怎么消除微信账号?)

    怎么消除微信账单记录(怎么消除微信账号?)

  • 微信把群聊天记录删了,怎么找到群(微信把群聊天记录删了,为什么没有新信息了)

    微信把群聊天记录删了,怎么找到群(微信把群聊天记录删了,为什么没有新信息了)

  • 耳机有电流电耳朵怎么回事(耳机有电流声会损坏耳机吗)

    耳机有电流电耳朵怎么回事(耳机有电流声会损坏耳机吗)

  • 我的苹果11怎么不是双卡(我的苹果11怎么没有录屏)

    我的苹果11怎么不是双卡(我的苹果11怎么没有录屏)

  • 微信怎么查看出行历史(微信怎么查看出行轨迹)

    微信怎么查看出行历史(微信怎么查看出行轨迹)

  • 怎样让电脑自动对时间(怎样让电脑自动开机)

    怎样让电脑自动对时间(怎样让电脑自动开机)

  • 苹果11有快充吗(苹果11有快充充电器吗)

    苹果11有快充吗(苹果11有快充充电器吗)

  • qmcflac格式转mp3格式(qmcflac格式转mp3格式在线转换)

    qmcflac格式转mp3格式(qmcflac格式转mp3格式在线转换)

  • vivo广告怎么关闭(vivo取消广告)

    vivo广告怎么关闭(vivo取消广告)

  • 抖音号可以查到微信吗(抖音号可以查到微信或手机号码吗)

    抖音号可以查到微信吗(抖音号可以查到微信或手机号码吗)

  • win10关机主机还在运行(win10关机后主机还亮着)

    win10关机主机还在运行(win10关机后主机还亮着)

  • 实际发的工资跟个人所得税不一样
  • 个人转让房产两年内全额计税是什么意思
  • 银行进账单票据号码在哪里
  • 商家为什么要做广告?
  • 个人与公司交的税怎么算
  • 成本核算方法有先进先出法吗
  • 房地产企业土地使用税
  • 土地使用权计入存货吗
  • 床位周转率计算公式
  • 给别人开的维修费专票怎么入账
  • 采购单录入、接收分配会计分录怎么写?
  • 砂石加工行业交什么税
  • 注销时分公司欠款怎么办
  • 债权债务转让税务问题
  • 怎么开个体工商户
  • 小微企业免征增值税优惠
  • 资产负债率之比
  • 小规模纳税人纳税申报时间
  • 企业不征税收入用于支出所形成的固定资产
  • 住房公积金证书更新
  • 关于防暑降温福利国家有哪些政策规定?
  • 坏账准备的转回对资产的影响
  • 外籍人员探亲签证
  • 调整上年少计提税金及附加
  • 苹果x如何显示电量数字
  • 怎么让别人无法访问我的qq空间
  • 资本公积有哪些科目
  • php抽象类使用场景
  • 开机反应慢是怎么回事
  • php模板引擎语法
  • 对公账户发放工资要固定几号打吗
  • 一次摊销法优缺点
  • 企业生产车间发生的固定资产折旧费属于制造费用
  • php异步处理方案
  • 大堡礁分布在澳大利亚的哪里
  • php连接mysql8.0
  • 前端控制台
  • kali linux如何使用
  • 工具合集
  • 成本核算的科目有哪些
  • 财务费用的核算内容有哪些
  • 销售中介费一般收多少
  • 物业费的会计处理
  • 政府补贴业务如何发放
  • 劳务税可以抵扣企业税比例
  • 水利基金减免
  • 会议费报销管理办法
  • 质量问题扣货款会计怎么处理
  • 建厂期间购买材料怎么办
  • 什么是企业管理的基础工作
  • 库存商品销售后怎么做账
  • 会计基本前提包括会计主体货币计量资料完整和经济效益
  • 营业收入是利润总额吗
  • sql server 性能调优
  • 新百伦588
  • mac音频设置在哪里
  • linux lxd
  • windows8怎么用
  • win10设置设备
  • macos手势
  • mac怎么访问windows
  • ubuntu安装配置静态ip地址
  • win10 20h2怎么更新
  • 苹果笔记本mac系列区别
  • 如何彻底解决win10自动重启
  • win10正式版激活码
  • win10系统最新更新
  • Intermediate Unity 3D for iOS: Part 1/3
  • perl判断字符串相等
  • perl删除文件夹
  • js数组如何定义
  • 使用nodejs实现简单的局域网聊天功能
  • 如何用node搭建服务器
  • JavaScript中的方法名不区分大小写
  • jquery 异步请求
  • jquery实现全选
  • jquery实现原理
  • 酒类包装物押金的消费税处理规定
  • 12366纳税服务热线工作时间
  • 增值税普通发票和电子普通发票的区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设