前端网页上文件以字符串的方式保存和还原

gym_1_2

已于 2022-12-08 14:34:39 修改

阅读量591

点赞数

文章标签： javascript

于 2022-12-08 14:25:23 首次发布

本文链接：https://blog.csdn.net/gym_1_2/article/details/128232119

版权

web 开发中，图片文件的上传，往往是以文件的方式保存在服务器的文件夹中。但有时也需要以其它的方式保存在后台数据库或其它地方。本文主要介绍网页上的图片文件如何转成字符串保存和还原。

1、图片文件保存为base64的字串和还原

利用FileReader和其提供的方法readAsDataURL。

图片文件转base64：

//文件保存为base64
	function saveAsBase64(file)
	{
		return new Promise((resolve,reject)=>{
			const reader = new FileReader()
			reader.addEventListener('loadend', function (e) {
				resolve(e.target.result)  //要保存的字串
			})
			reader.readAsDataURL(file)
		})
	}

从base64还原：

document.getElementById('myImge').src=base64Str

2、图片文件保存为16进制字符串和还原

利用FileReader和readAsBinaryString保存，还原时先用new Blob() 还原为原文件，再用readAsDataURL转base64。

图片文件保存为16进制字串

//文件保存为16进制字符串
	function saveAsHexadecimal(file)
	{
		return new Promise((resolve,reject)=>{
			const reader = new FileReader();
			reader.addEventListener('loadend', function (e) {
				fileHexadecimalStr=binaryToHexadecima(e.target.result);
				resolve(fileHexadecimalStr)
			});
			reader.readAsBinaryString(file);
		})
		
	} 

//二制文件转16进制字串
	function binaryToHexadecima(binary)
	{
		let mybyteStr =[];
		for (let j = 0; j < binary.length; j++) {
		    let byteStr = binary[j].valueOf().charCodeAt(0).toString(16);
			mybyteStr.push(byteStr.length === 1 ? ('0' + byteStr) : byteStr)
		}
		return mybyteStr.join('')
	}

从16进制字符串还原为图片文件

//从16进制字串还原
	function recoveryFromHexadecimal(hexFileStr,type)
	{
		let len = hexFileStr.length / 2 ;
		let array = new Uint8Array(len);
		for (let k = 0; k < len; k++) {
		    array[k] = parseInt(hexFileStr.substr(k * 2, 2), 16);
		}
		var blob = new Blob([array], {type: "application/octet-stream"});
		const reader = new FileReader();
		reader.addEventListener('loadend', function (e) {
			let srcStr=e.target.result.replace("application/octet-stream", "image/" + type);
			document.getElementById('myImge2').src=srcStr
		})
		reader.readAsDataURL(blob) 
	}

完整的示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="file" onchange="fileChange(this)"   />
		<img alt="" id='myImge1'/>
		<img alt="" id='myImge2'/>
	</body>
</html>
<script>
	function fileChange(e)
	{
		let file = e.files[0];
		let type = file.name.toLowerCase().split('.').splice(-1); //获取上传的文件后缀名
		console.log(type)
		
		//文件保存为base64
		saveAsBase64(file).then(fileBase64Str=>{
			console.log(fileBase64Str);
			 //从base64字串还原
			 recoveryFromBase64(fileBase64Str)
		})
			
		//保存为16进制字符串
		saveAsHexadecimal(file).then(hexFileStr=>{
			// 从16进制字串还原
			recoveryFromHexadecimal(hexFileStr,type)
		})
	}
	
	//文件保存为base64
	function saveAsBase64(file)
	{
		return new Promise((resolve,reject)=>{
			const reader = new FileReader()
			reader.addEventListener('loadend', function (e) {
				resolve(e.target.result)  //要保存的字串
			})
			reader.readAsDataURL(file)
		})
	}
	
	//从base64还原
	function recoveryFromBase64(fileBase64Str)
	{
		document.getElementById('myImge1').src=fileBase64Str
	}
	//文件保存为16进制字符串
	function saveAsHexadecimal(file)
	{
		return new Promise((resolve,reject)=>{
			const reader = new FileReader();
			reader.addEventListener('loadend', function (e) {
				fileHexadecimalStr=binaryToHexadecima(e.target.result);
				resolve(fileHexadecimalStr)
			});
			reader.readAsBinaryString(file);
		})
	} 
	//从16进制字串还原
	function recoveryFromHexadecimal(hexFileStr,type)
	{
		let len = hexFileStr.length / 2 ;
		let array = new Uint8Array(len);
		for (let k = 0; k < len; k++) {
		    array[k] = parseInt(hexFileStr.substr(k * 2, 2), 16);
		}
		var blob = new Blob([array], {type: "application/octet-stream"});
		const reader = new FileReader();
		reader.addEventListener('loadend', function (e) {
			let srcStr=e.target.result.replace("application/octet-stream", "image/" + type);
			document.getElementById('myImge2').src=srcStr
		})
		reader.readAsDataURL(blob) 
	}
	
	//二制文件转16进制字串
	function binaryToHexadecima(binary)
	{
		let mybyteStr =[];
		for (let j = 0; j < binary.length; j++) {
		    let byteStr = binary[j].valueOf().charCodeAt(0).toString(16);
			mybyteStr.push(byteStr.length === 1 ? ('0' + byteStr) : byteStr)
		}
		return mybyteStr.join('')
	}

</script>