关于JS进行大文件分片上传碰到的问题

关于JS进行大文件分片上传碰到的问题

---

前端大文件分片是采用JS的 blob.slice 进行分片处理，但是上传时，可能会被服务器上的D盾拦截，因为文件分片后可能会在分片段起始位置出现某些字符被D盾误认为非法(序列化),，导致服务端无法接收到数据，注意特别是Video文件。

JS分片后的BLOB可能会被服务器拦截

JS分片后的BLOB只是大文件中的部分内容，但是某些字符出现在BLOB的起始位置时，就会被服务器上的D盾误认为是非法的，这时上传就会出错，服务器会返回提示：【禁用】序列化。解决这个问题，可以采用的方法可能有很多种，这里我就讲一下两种方式；

1、重新定义JS分片的容量

假设 JS 分片的大小为 1024KB(1MB)时，上传被服务器拦截，这时我们改变 BLOB分片的大为 800KB或其它值，这样也能够解决问题，但是也不能完成避免问题的出现；

2、对分片 BLOB 进行转码处理

在 JS 分片取得 BLOB后，对BLOB进行转码处理，就可以完全避免被拦截的问题出现；

前端JS代码：

	//文件分片
	chunk = blob.slice(start, end, 'image/png');
	
	// 分片进行base64编码
	fileToBase64(chunk, uploadFile);
	
	// base64编码处理
	fileToBase64: function(file, callback) {
		var that = this;
		var fileReader = new FileReader();
		fileReader.readAsDataURL(file);
		fileReader.onload = function(){
			callback.call(that, this.result);
	    }
	}
	// 上传
	uploadFile: function(chunk) {
		var formData = new FormData();
		// base64编码转blob
		var blob= new Blob(chunk.split(''));
		formData.append("file", blob, '原上传文件名');
		$.ajax({
			// ... ajax数据与返回，请自行填写，
		})
	}

由于服务端本人采用 php处理，所以给下php代码

/**
* bupload.php
**/

	// 前端JS 上传的BLOB分片块
	$file = $_FILES['file'];
	$blob = file_get_contents($file);
	// 上传的文件是base64编码，利用[,]分割字符串，进行base64解码，可得文件原始内容
	// 不明白如此处理的，请自行查看上传文件的内容格式
	list($a, $b) = explode(',', $blob);
	$blob = base64_decode($b);   // 转码后的数据就是上传的真正数据
	// 至于怎么进行文件内容的合并，这里就不写了
	// ...

这里本人只做问题的解决方案，故不提供全部代码。
采用base64编码的缺点，就是上传的内容会变大了些，所花费的时长也增加了，本来分片上传就慢 😃。