当前位置: 首页 > news >正文

JS前端读取本地上传的File文件对象内容(包括Base64、text、JSON、Blob、ArrayBuffer等类型文件)

读取base64图片File

file2Base64Image(file, cb) {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (e) {cb && cb(e.target.result);//即为base64结果};
},

读取text、JSON文件File

readText(file, { onloadend } = {}) {const reader = new FileReader();reader.onloadend = function (e) {onloadend && onloadend(reader.result, e);};reader.readAsText(file);
},

读取分段Blob文件File(ArrayBuffer)

FileReader.readAsArrayBuffer() - Web API 接口参考 | MDNFileReader 接口提供的 readAsArrayBuffer() 方法用于启动读取指定的 Blob 或 File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsArrayBuffer

readArrayBuffer(file, { onloadstart, onprogress, onload } = {}) {const reader = new FileReader();// 开始读取reader.onloadstart = function (e) {onloadstart && onloadstart(e);};// 正在加载reader.onprogress = function (p) {onprogress && (parseFloat(p.loaded / file.size).toFixed(2));};// 加载完成reader.onload = function (e) {if (reader.error) { return; }let buffer = new Uint8Array(reader.result);onload && onload(reader.result, buffer, e);};reader.readAsArrayBuffer(file);
},
http://www.lryc.cn/news/104697.html

相关文章:

  • 【项目方案】OpenAI流式请求实现方案
  • 华为数通HCIP-IP组播基础
  • STM32 SPI学习
  • 分布式缓存与数据库的一致性记录
  • vue3的语法
  • 【git合并分支自定义提交消息】
  • AttributeError: module ‘PyQt5.QtGui‘ has no attribute ‘QMainWindow‘
  • 基于Java+SpringBoot+Vue前后端分离电商项目
  • Rpc服务消费者(Rpc服务调用者)实现思路
  • FANUC机器人实现2个RO输出信号互锁关联(互补)的具体方法
  • 权威认可|云畅科技再次入选中国信通院「高质量数字化转型产品及服务全景图」
  • 爬虫小白-如何调试列表页链接与详情链接不一样并三种方式js逆向解决AES-ECB
  • Ubuntu 离线部署的常见操作
  • 什么是多运行时架构?
  • 【MySQL】mysql | linux | 离线安装mysqldump
  • 中国农村程序员学习此【JavaScript教程】购买大平层,开上帕拉梅拉,迎娶白富美出任CEO走上人生巅峰
  • 【Python】Web学习笔记_flask(2)——getpost
  • RabbitMQ 教程 | 第5章 RabbitMQ 管理
  • LLM微调 | Adapter: Parameter-Efficient Transfer Learning for NLP
  • 在idea中添加try/catch的快捷键
  • 企业级开发中协同开发与持续集成持续部署
  • 九五从零开始的运维之路(其二十八)
  • iOS--Runloop
  • Doccano工具安装教程/文本标注工具/文本标注自己的项目/NLP分词器工具/自然语言处理必备工具/如何使用文本标注工具
  • windows系统之WSL 安装 Ubuntu
  • 洛谷题解 | P1046 陶陶摘苹果
  • 记一次Apache HTTP Client问题排查
  • Linux获取文件属性
  • String字符串拼接
  • 在矩池云使用Llama2-7B的具体方法