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

文章目录

基本概念与作用说明
从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编码

html 复制代码

    <input id="uploadBtn" type="file" onchange="loadExcel(event)" />

javascript 复制代码

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对象

javascript 复制代码

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编码

javascript 复制代码

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对象

javascript 复制代码

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对象。这些技术在处理文件上传、图片预览等方面非常有用，也是前端开发者必备的技能之一。希望这篇文章能够帮助你更好地理解和掌握这些知识。