[JavaScript知识库] JavaScript 之 FileReader简介以及原生、uniapp如何将文件转成base64编码字符串示例

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript 之 FileReader简介以及原生、uniapp如何将文件转成base64编码字符串示例 -> 正文阅读

[JavaScript知识库]JavaScript 之 FileReader简介以及原生、uniapp如何将文件转成base64编码字符串示例

作者:recommend-item-box type_blog clearfix

利用 FileReader对象，详情查看MDN官方说明点击这里。

FileReader 对象简介

FileReader对象的方法：

方法	参数	简介	说明
FileReader.readAsBinaryString(blob)	即将被读取的 Blob 或者 File 对象	将文件读取为二进制编码	会读取指定的 Blob 或 File 对象，当读取完成的时候，readyState 会变成DONE（已完成），并触发 loadend (en-US) 事件，同时 result 属性将包含所读取文件原始二进制格式。该方法已从 FileAPI 标准移除，请使用 FileReader.readAsArrayBuffer() 代替。
FileReader.readAsArrayBuffer(blob)	即将被读取的 Blob 或 File 对象。	用于替换FileReader.readAsBinaryString(blob)的方法	用于启动读取指定的 Blob 或 File 内容。当读取操作完成时，readyState 变成 DONE（已完成），并触发 loadend (en-US) 事件，同时 result 属性中将包含一个 ArrayBuffer 对象以表示所读取文件的数据。
FileReader.abort()	无	中断读取操作	该方法可以取消 FileReader 的读取操作，触发之后 readyState 为已完成（DONE）；无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
FileReader.readAsDataURL(blob)	即将被读取的 Blob 或 File 对象。	将文件读取为DataURL(base64)	会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
FileReader.readAsText(blob[, encoding])	blob：二进制对象Blob或 File类型；encoding：可选，字符串类型的编码类型，默认为“utf-8”类型	将文件读取为文本，其中第二个参数是文本的编码方式，默认值为 UTF-8	可以将 Blob 或者 File 对象转根据特殊的编码格式转化为内容(字符串形式)；这个方法是异步的，也就是说，只有当执行完成后才能够查看到结果，如果直接查看是无结果的，并返回undefined；也就是说必须要挂载实例下的 onload 或 onloadend 的方法处理转化后的结果；当转化完成后， readyState 这个参数就会转换为 done 即完成态， event(“loadend”) 挂载的事件会被触发，并可以通过事件返回的形参得到中的 FileReader.result 属性得到转化后的结果

相关事件（点击事件名查看示例）：

事件	说明
FileReader.onabort	该事件在读取操作被中断时触发。
FileReader.onerror	该事件在读取操作发生错误时触发。
FileReader.onload	该事件在读取操作完成时触发。
FileReader.onloadstart	该事件在读取操作开始时触发。
FileReader.onloadend	该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress	该事件在读取Blob时触发。

?
?

原生中的具体使用方法如下

// 创建一个input 文件选择表单元素
var input = document.createElement('input');
input.type = 'file'; // 文件选择表单元素的类型
input.id = 'file';
input.name = 'file';
// 文件选择表单元素的样式
input.style.cssText = `
	width: 70%;
	margin: 10px 0 10px 0;
`;
// 将创建的文件选择表单元素添加到某元素中
let uploadDom = document.getElementById("upload");
uploadDom .appendChild(input);
// 文件选择表单元素的change事件
input.onchange = e => {
	const file = e.target.files[0];
	this.urls = window.webkitURL.createObjectURL(file)
	if(file.size > (1024*1024 * 50)){
		alert('单个文件请勿超过50M,请重新上传')
	}
	let fileFullName = file.name; // 文件全称
	let fileName = file.name.split('.')[0]; // 文件名称
	let fileType = file.name.split('.')[1]; // 文件类型
	// 创建一个FileReader 对象
	var reader = new FileReader();
	reader.readAsDataURL(file);
	reader.onload = function(e){
		let byte_64 = reader.result.substring(reader.result.indexOf(',')+1);  // 文件字节流字符串(base64编码)
	}
}

?
?

uniapp中的具体使用方法如下

uni.chooseFile({
	count: 1, //默认9
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	success: chooseFile => {
		console.log('chooseFile', chooseFile);
		const tempFiles = chooseFile.tempFiles;
		var reader = new FileReader();
		reader.readAsDataURL(tempFiles[0]);
		reader.onload = e => {
			this.fileFullName = tempFiles[0].name; // 文件全称
			this.byte_64 = e.target.result.split(';base64,')[1]; // 文件字节流字符串(base64编码)
			this.fileName = tempFiles[0].name.split('.')[0]; // 文件名称
			this.fileType = tempFiles[0].name.split('.')[1]; // 文件类型
		};
	}
});