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

利用 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]; // 文件类型
		};
	}
});

注：这里使用了不用的截取字符串的方式截取base64的字节流编码，自行选择方式即可。

 
 

如有不足，望大家多多指点！ 谢谢！