【JavaScript】如何转换blob数据与file文件还有url

大家好，关于blob对象和file对象有了解多少呢，它们都是一种文件的表示形式，文件之间是可以互相转换的，顺带一提，还有经常用到的临时文件路径tempFileURL。

文件类型

首先，需要先知道文件类型有哪些，我们可以通过文件名后缀判断

常见的文件类型列表

文件后缀	MIME类型	说明
txt	text/plain	文本文件
htm, html	text/html	HTML文本
pdf	application/pdf	PDF文档
doc	application/msword	Word文档
png	image/png	PNG图片
jpg, jpeg	mage/jpeg	JPEG图片
tar	application/x-tar	TAR文件
gzip	application/x-gzip	GZIP文件
…	…	…

Blob对象

了解一下，Blob对象有哪些属性，这是一个存储了二进制的原始数据文件，类似与File文件对象的只读文件，是临时存放的，方便缓存和处理文件

• 文件类型 MIME type
• 文件内容 base64 或 blobURL

创建一个blob对象

/**
* 文本转blob对象
* @param String text 文本内容
* @param String type MIME 类型
*/
function createObjectBlob(text,type='text/plain'){
	return new Blob([text], { type });
}

可将blob对象转file对象

/**
* blob转file对象
* @param String blob 对象
* @param String filename 文件名
* @param String type MIME 类型
*/
function createObjectFile(blob,filename,type='text/plain'){
	return new File([blob],filename,{ type });
}

可将blob对象转换临时文件l路径url

/**
* blob转url临时访问地址
* @param String blob 对象
*/
function createObjectURL(blob){
	return URL.createObjectURL(blob);
}

File对象

了解一下，File对象有哪些属性，我们知道，可通过选择文件上传用到的HTML标签<input type="file" />，从中可得到上传文件的File对象实例

• 文件名 filename, 例如 readme.txt
• 文件类型 MIME type
• 文件内容

创建一个file对象

/**
* 文本转file对象
* @param String text 文本内容
* @param String filename 文件名
* @param String type MIME 类型
*/
function createObjectFile(text,filename,type='text/plain'){
	return new File([text],filename,{ type });
}

可将file对象转blob对象

/**
* file转blob对象
* @param String file 对象
*/
function createObjectBlob(file){
	return new Blob([file],{type:file.type});
}

将file对象转换为临时文件路径url

/**
* file转url临时访问地址
* @param String file 对象
*/
function createObjectURL(file){
	return URL.createObjectURL(file);
}

URL临时路径

了解一下，URL临时路径，还可以命名为TempFilePath，见名知意，是Blob对象的临时文件位置，用于访问文件资源

临时文件路径url可以转换为file对象

/**
* url临时访问地址转file对象
* @param { url, filename, type, success, fail } 临时地址，文件名，MIME类型，成功回调，失败回调
*/
function createObjectFile(e){
	const { url, filename } = e;
	const encode = e.encode || 'utf-8';
	const type = e.type || 'text/plain';
	let reader = new FileReader();
	reader.onloadend = () => {
		if(url.startsWith('data:') type=url.split(',')[0].match(/:(.*?);/)[1];
		let file = new File([reader.result],filename,{ type });
		e.success({ file });
	};
	if(e.fail) reader.onerror = e.fail;
	if(type.startsWith('text')) reader.readAsText(url, encode);//读取文本
	else if(type.startsWith('image')) reader.readAsDataURL(url, encode);//读出的是base64字符串 可赋值给标签img.src
	else reader.readAsArrayBuffer(url, encode);//读出的是ArrayBuffer对象
}

注意url如果是base64字符串（以data:开头）表示形式，字符串是会比较长，这可不是临时文件路径，这只是直接将文件内容转换为字符串编码，所以会看到字符串会比较长，这可不适用大文件处理哦，通常用于图标或图像文件处理和显示

临时文件路径url可以转换为blob对象

/**
* url临时访问地址转blob对象
* @param { url, success, fail } 临时地址，成功回调，失败回调
*/
function createObjectBlob(e){
	const { url } = e;
	try{
		if(url.startsWith('data:')){
			let arr = url.split(','),
				type = arr[0].match(/:(.*?);/)[1],
				bstr = atob(arr[1]),
				n = bstr.length,
				u8arr = new Uint8Array(n);
			while(n--) u8arr[n] = bstr.charCodeAt(n);
			e.success({
				blob: new Blob([u8arr], { type })
			});
		}else{
			let xhr = new XMLHttpRequest();
			xhr.responseType = 'blob';
			xhr.onload = () => e.success({
				blob: xhr.response
			});
			if(e.fail) xhr.onerror = e.fail;
			xhr.open('GET', url);
			xhr.send();
		}
	}catch(err){
		if(e.fail) e.fail(err)
	}
}

例如这样调用

createObjectBlob({
	url:'blob:http://localhost:...',
	success(res){
		const { blob } = res;
		//...
	}
})

注意临时文件路径url的表示形式

base64 例如 data:text/plain;base64,b2ZmaWNlMjAxOea/gOa0u+WvhumSpe…
blob 例如 blob:http://localhost:…