二进制图片数据上传至服务器

图片上传至服务器方法：

（1）使用form表单上传
（2）使用ajax中的formdata格式上传
（3）将图片转为base64格式数据上传
（4）将图片转为二进制格式数据上传

由于form表单和ajax的formdata格式上传数据的灵活性不强，在此只介绍后两种方式。

1.将图片转为base64

图片转为base64后，因其编码格式特殊（将每三个字节拆分成四个字节），会使图片大小变为原来的4/3（清晰度不会发生任何变化），与二进制数据表示图片相比，这在上传较大图片以及较多图片时会占用较多的内存空间。因而不建议直接将base64格式的数据上传至服务器。


代码如下：

function imagetobase64(){
		var file = document.getElementById(‘filename’).files[0];
		//创建file对象，获取页面中名为filename的input标签中的图片文件
		var reader = new FileReader();
		//创建FileReader类型对象reader
		reader.readAsDataURL(file);
		//用reader对象将file图片对象中的数据转为base64格式数据
		reader.onload = function(event){
				console.log(event.target.result);
				//输出转换后数据
		}
}

若需要将base64格式的数据上传至服务器，只需要将其以文本格式发送即可

2.将图片转为二进制格式上传

图片转为二进制格式后，数据不会发生任何大小上的改变，因而在图片的传输上建议使用该方法


（1）图片转换二进制，代码如下：

function clickb() {
		var file = document.getElementById('filese').files[0];
		//获取id为filese的input标签中的文件
		var reader = new FileReader();
		//创建FileReader对象
		reader.readAsArrayBuffer(file);
		//利用reader对象将file文件转为二进制数组ArrayBuffer
		reader.onload = function(event) {
				console.log(event.target.result);
		}
	}

注意，ArrayBuffer类型数组与普通数组不同，其是固定长度的原始二进制缓冲区，并且不能够直接操作ArrayBuffer中的内容，需要通过类型数组对象或DataView对象来操作，它们会将缓冲区中的数据表示为特定的格式，并通过这些格式来读写缓冲区的内容。

（2）用Ajax上传二进制数据，代码如下：

function clickb() {
		var file = document.getElementById('filese').files[0];
		var reader = new FileReader();
		reader.readAsArrayBuffer(file);
		reader.onload = function(event) {
			var http = new XMLHttpRequest();
			var url = 'http://localhost:8080/LKKL/NN';
			http.open('POST', url, true);
			http.responseType = 'arraybuffer';
			/* 注意，当获取后端数据为二进制字节byte时，必须设置responseType类型为arraybuffer，
			（如果后端发送的数据是二进制，用默认responseType会将接收到的二进制转为字符串，导致
			后期二进制转图片时生成乱码，无法生成正常图像）且该类型设置必须在该ajax对象设为异步
			（即http.open()方法的第三个参数设为true）之后，否则报错 */
			http.onreadystatechange = function() {
				if (http.readyState == 4) {
					var img = document.createElement('img');
					var datas = ArrayBufferToBase64(http.response);
					//利用下方的函数将接收到的ArrayBuffer转为base64
					img.src = "data:image/png;base64," + datas;
					//转换后的base64并不能直接用于图片的src，需要加上"data:image/png;base64,"
					document.getElementById('sss').appendChild(img);
				}
			}
			http.send(this.result);
		}
	}

function ArrayBufferToBase64(buffer) {
		//第一步，将ArrayBuffer转为二进制字符串
		var binary = '';
		var bytes = new Uint8Array(buffer);
		for (var len = bytes.byteLength, i = 0; i < len; i++) {
			binary += String.fromCharCode(bytes[i]);
		}
		//将二进制字符串转为base64字符串
		return window.btoa(binary);
		/* btoa()方法用于将字符串解析为base64数据，因js不能（或者很难）将二进制直接转为图片，
		所以在此将base64作为中介，上传和下载都采用二进制，前端显示图片只需要使用btoa()方法将
		接收到的二进制数据转为base64格式，注意：base64格式如果想要显示为图片，需要在转换后的
		数据前加上"data:image/png;base64," */
			}

（3）用axios上传二进制数据，代码如下：

	var file = document.getElementById('filess').files[0];
	var reader = new FileReader();
	reader.readAsArrayBuffer(file);
	reader.onload = function(event){
	axios({
			method:'post',
			url:'http://localhost:8080/LKKL/NN',
			data:event.target.result,
			responseType:'arraybuffer'
			}).then(
					(response)=>{
							var img = document.createElement('img');
							var array = new Uint8Array(response.data);
							var datas = '';
							for(var i = 0;i<array.length;i++){
									datas += String.fromCharCode(array[i]);
							}
							var p = btoa(datas);
							img.src = 'data:image/png;base64,'+p;
							document.getElementById('a').appendChild(img);
					});
			}