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

js 通过input,怎么把选择的txt文件转为base64格式

文章目录

  • 基本概念与作用说明
    • Base64编码
    • File对象
    • 相互转换的意义
  • 从File对象到Base64编码
  • 从Base64编码到File对象
  • 批量转换File对象为Base64编码
  • 批量转换Base64编码为File对象
  • 功能使用思路
    • 思路一:动态生成预览
    • 思路二:异步处理与用户反馈
    • 思路三:上传前的文件压缩
  • 实际开发中的技巧

在前端开发中,Base64编码和File对象是处理文件数据时经常使用的两种方式。Base64编码常用于将二进制数据转换为文本格式,便于在网络中传输。而File对象则提供了处理用户上传文件的接口。本文将深入探讨这两种数据格式之间的转换,并通过多个示例来展示如何在实际开发中运用这些技术。

基本概念与作用说明

Base64编码

Base64编码是一种将二进制数据转换成ASCII字符串的方法,使得数据能够在不支持二进制数据的环境中传输。通常用于邮件附件、嵌入图像到HTML文档、或者在网络上传输二进制数据。

File对象

File对象代表文件系统中的文件,它包含了文件的基本信息(如文件名、类型)以及文件数据。在Web应用程序中,用户可以选择文件并通过FileReader API读取文件内容。

相互转换的意义

在前端开发中,我们经常需要将用户上传的文件转换为Base64编码以便在网络中传输,或者将Base64编码的数据转换回File对象以方便进一步处理(如下载、预览等)。了解这些转换方法对于前端开发者来说是非常重要的

从File对象到Base64编码

    <input id="uploadBtn" type="file" onchange="loadExcel(event)" />
function fileToBase64(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = (event) => {resolve(event.target.result);};reader.onerror = reject;reader.readAsDataURL(file); // 读取文件为DataURL});
}
function loadExcel(e) {const file = e.target.files[0];try {fileToBase64(file).then(function (res) {console.log(res)let data = {"type": "text/plain",data: res}ll111I1(data)})} catch (error) {console.error('Error reading file:', error);}}

从Base64编码到File对象

function base64ToFile(base64String, fileName) {const arr = base64String.split(',');const mime = arr[0].match(/:(.*?);/)[1];const bstr = atob(arr[1]);let n = bstr.length;const u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], fileName, { type: mime });
}// 使用示例
const base64String = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
const file = base64ToFile(base64String, 'example.png');
console.log('File:', file);

批量转换File对象为Base64编码

async function filesToBase64(files) {const promises = Array.from(files).map(file => fileToBase64(file));const base64Strings = await Promise.all(promises);return base64Strings;
}// 使用示例
const fileInput = document.getElementById('file-input-multiple');
fileInput.addEventListener('change', async (event) => {const files = event.target.files;try {const base64Strings = await filesToBase64(files);console.log('Base64 Strings:', base64Strings);} catch (error) {console.error('Error reading files:', error);}
});

批量转换Base64编码为File对象

function base64sToFiles(base64Strings, fileNames) {const files = base64Strings.map((base64String, index) => {return base64ToFile(base64String, fileNames[index]);});return files;
}// 使用示例
const base64Strings = ['data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=','data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUTExMWFhUXGBgXGBgaGhsfHh0eHyggGBolHRUtHyUvLzYtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLf/AABEIALwBQAMAwEAAhEDEQA/ALy8A...'
];
const fileNames = ['example1.png', 'example2.jpg'];
const files = base64sToFiles(base64Strings, fileNames);
console.log('Files:', files);

功能使用思路

思路一:动态生成预览

在用户上传图片时,可以实时将图片转换为Base64编码并在页面上预览,提高用户体验。

思路二:异步处理与用户反馈

处理文件时,可以使用Promise或者async/await来处理异步操作,并通过进度条等方式向用户展示处理进度。

思路三:上传前的文件压缩

在上传文件之前,可以先将文件转换为Base64编码,然后使用Canvas API对其进行压缩,以减少网络传输的时间。

实际开发中的技巧

  • 性能优化:在处理大量文件时,可以考虑使用Web Workers来避免阻塞UI线程。

  • 错误处理:添加适当的错误处理逻辑,确保在读取文件失败时能够给出友好的提示。

  • 安全性考虑:验证文件类型和大小限制,防止恶意文件上传。

  • 兼容性:测试不同的浏览器,确保所有现代浏览器都能正确支持这些功能。

通过以上示例和技巧,你应该能够更加熟练地在实际项目中使用Base64编码和File对象。这些技术在处理文件上传、图片预览等方面非常有用,也是前端开发者必备的技能之一。希望这篇文章能够帮助你更好地理解和掌握这些知识。

相关文章:

js 通过input,怎么把选择的txt文件转为base64格式

文章目录 基本概念与作用说明Base64编码File对象相互转换的意义 从File对象到Base64编码从Base64编码到File对象批量转换File对象为Base64编码批量转换Base64编码为File对象功能使用思路思路一&#xff1a;动态生成预览思路二&#xff1a;异步处理与用户反馈思路三&#xff1a;…...

华为HCIP-openEuler认证详解

华为HCIP认证&#xff08;Huawei Certified ICT Professional&#xff09;是华为提供的专业级ICT技术认证&#xff0c;它旨在验证技术人员在特定技术领域的专业知识和实践能力。对于华为欧拉&#xff08;openEuler&#xff09;方向的HCIP认证&#xff0c;即HCIP-openEuler&…...

YOLO11改进 | 注意力机制 | 添加双重注意力机制 DoubleAttention【附代码+小白必备】

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 在本文中&#xff0c;给大家带来的教程是…...

sentinel原理源码分析系列(四)-ContextEntry

启动和初始化完成后&#xff0c;调用者调用受保护资源&#xff0c;触发sentinel的机制&#xff0c;首先构建或获取Context和获取Entry&#xff0c;然后进入插槽链&#xff0c;决定调用是否通过&#xff0c;怎样通过 上图展示构建Context和获取Entry的类互动图 获取或构建Conte…...

Tcp协议讲解与守护进程

TCP协议&#xff1a;面向链接&#xff0c;面向字节流&#xff0c;可靠通信 创建tcp_server 1.创建套接字 域&#xff1a;依旧选择AF_INET 连接方式&#xff1a; 选择SOCK_STREAM 可靠的 2.bind 3.监听装置 client要通信&#xff0c;要先建立连接&#xff0…...

学习threejs,THREE.LineDashedMaterial 虚线材质,基于gosper高斯帕曲线生成雪花动画

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.LineDashedMaterial虚…...

LeetCode 热题100之哈希

1.两数之和 思路分析1&#xff08;暴力法&#xff09; 双重循环枚举满足num[i] nums[j] target的索引&#xff0c;刚开始不知道如何返回一对索引。后来知道可以直接通过return {i,j}返回索引&#xff1b;注意&#xff1a;j应该从i1处开始&#xff0c;避免使用两次相同的元素…...

软工——模块设计(爱啦爱啦)

过程设计的工具 一、程序流程图 程序流程图又称为程序框图&#xff0c;它是历史最悠久、使用最广泛的描述过程设计的方法。 它的主要优点是对控制流程的描绘很直观&#xff0c;便于初学者掌握。 程序流程图历史悠久&#xff0c;至今仍在广泛使用着。 程序流程图的主要缺点&a…...

Xmind一款极简思维导图和头脑风暴软件,支持PC和移动端,Xmind 2024.10.01101版本如何升级到Pro版?简单操作,最新可用!

文章目录 Xmind下载安装Xmind免费升级到Pro Xmind 是一款全功能的思维导图和头脑风暴软件&#xff0c;不限制节点和文件数&#xff0c;创新无限&#xff0c;界面纯净简洁无广告&#xff0c;支持PC和移动端&#xff0c;思维导图和大纲视图自由切换&#xff0c;可本地化文档存储&…...

自动化工具:Ansible

目录 一、运维自动化工具有哪些 二、Ansible 概述 1、Ansible 概念 2、Ansible 特点 3、Ansible 工作流程 三、安装部署Ansible 1、环境部署 2、管理节点安装 Ansible 3、查看Ansible相关文件 4、配置主机清单 5、免密管理 ssh-keygen 5.1、测试连通性 5.2、简洁输…...

我是类(最终版)

文章目录 再看构造函数类型转换static静态成员友元内部类匿名对象对象拷贝时的编译器优化 再看构造函数 本标题的目的是解决如下问题&#xff1a;当实现MyQueue时&#xff0c;我们不需要写默认构造函数&#xff0c;因为编译器会调用Stack的默认构造&#xff0c;但是&#xff0…...

详解ip route

ip route命令用于查看 Linux 系统中的路由表信息。 路由表包含的主要信息 目标网络地址&#xff08;Destination&#xff09; 显示网络的目标地址&#xff0c;可以是一个具体的网络地址&#xff08;如192.168.1.0/24&#xff09;&#xff0c;也可以是一个默认网络&#xff08;…...

OpenGL进阶系列04 - OpenGL 点精灵

一:概述 OpenGL 点精灵是一种渲染技术,用于在3D场景中渲染小的、可缩放的点。它们通常用于表示粒子效果、光源或其他小物体。点精灵会根据视图和投影矩阵自动调整大小,使其始终在屏幕上保持一致的视觉效果。实现时,点精灵通常通过使用纹理和适当的着色器来增加视觉效果。 …...

VSCode按ctrl与鼠标左键无法实现跳转的解决办法

vscode编译环境老是出问题&#xff0c;下面介绍两种解决方法 需要提前配置好代码编译需要的库以及编译器位置等等。 ctrlshiftp,输入 >C/C配置&#xff08;JSON&#xff09; 打开生成的c_cpp_properties.json {"configurations": [{"name": "Li…...

U盘数据丢失不用慌,这4个工具可以帮你恢复。

因为将大量的数据存到U盘里面很方便&#xff0c;所以U盘使用也很广泛。但是里面的数据丢失想必很多朋友都碰到过&#xff0c;不过现在有很多方法都可以帮助大家将数据回顾回来。这里我便筛选了几款比较好的数据恢复工具&#xff0c;在这里跟大家分享。 1、福昕U盘恢复软件 直通…...

如何在Ubuntu上挂载一块硬盘:详解方案与实操步骤【小白无坑版】

如何在Ubuntu上挂载一块硬盘&#xff1a;详解方案与实操步骤 一、引言 在日常的开发或使用中&#xff0c;我们经常会遇到这样的场景&#xff1a;系统硬盘空间不足&#xff0c;需要额外挂载一块硬盘以扩展存储&#xff1b;或者我们需要将一块新硬盘用于专门存储数据或备份项目…...

【JAVA】第三张_Eclipse下载、安装、汉化

简介 Eclipse是一种流行的集成开发环境&#xff08;IDE&#xff09;&#xff0c;可用于开发各种编程语言&#xff0c;包括Java、C、Python等。它最初由IBM公司开发&#xff0c;后来被Eclipse Foundation接手并成为一个开源项目。 Eclipse提供了一个功能强大的开发平台&#x…...

go-zero系列-限流(并发控制)及hey压测

参考地址&#xff1a; go-zero系列-限流(并发控制)&#xff1a;https://go-zero.dev/docs/tutorials/service/governance/limiter hey地址&#xff1a;https://github.com/rakyll/hey1、压测工具hey下载安装&#xff1a; 会安装到GOPATH/bin目录下 go install github.com/ra…...

Electron-(三)网页报错处理与请求监听

在前端开发中&#xff0c;Electron 是一个强大的框架&#xff0c;它允许我们使用 Web 技术构建跨平台的桌面应用程序。在开发过程中&#xff0c;及时处理网页报错和监听请求是非常重要的环节。本文将详细介绍 Electron 中网页报错的日志记录、webContents 的监听事件以及如何监…...

银河麒麟(debian)下安装postgresql、postgis

1、安装postgresql、postgis sudo apt update sudo apt install postgresql postgresql-contrib sudo apt install postgis postgresql-12-postgis-32、创建一个使用postgis的数据库 sudo -i -u postgres #postgres管理员用户createdb gisdb #创建新的gisdb数据库 psql -d gi…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

基于单片机的宠物屋智能系统设计与实现(论文+源码)

本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢&#xff0c;连接红外测温传感器&#xff0c;可实时精准捕捉宠物体温变化&#xff0c;以便及时发现健康异常&#xff1b;水位检测传感器时刻监测饮用水余量&#xff0c;防止宠物…...