分片上传含前端JS和后端处理（thinkphp）

前端处理需要上传的文件，slice对file进行切片上传，这里我使用了URL传参，所有就没在FORMDATA中增加参数了。
这里我引入了Jquery插件。

onsubbtn(){
	    	let that = this ;
	    	var filecount='',setsize=80000,cutindex='',cutfile='';
            var file =  $("#baba")["0"].files[0];
            filecount = Math.round(file.size/setsize)
            console.log(filecount)
            for (var i = 0; i < filecount ; i++) {
            	var formData = new FormData(); 
				cutfile = file.slice(i*setsize,(i+1)*setsize);
				formData.append("file", cutfile);
				upload(formData,filecount,file.name,i)
			}
            Toast.loading({
			  mask: true,
			  message: '上传中',
			  duration:0,
			});
            // console.log(formData) 
	    	function upload(data,cut,name,index){
				$.ajax({
	          		type:"post",
	          		url:that.ajax+'/upload/1/'+that.defined.userInfo.user+'/'+cut+'/'+name+'/'+index,
	          		data:data,
	          		contentType: false,
	          		processData: false,
	          		success:function(res){
	          			if(res.code == 10014){
	          				that.url = res.data;
	          				Toast.clear();
		          			setTimeout(function(){
		          				if(res.other == 1){
		          					that.zxEditor.addImage(that.ajax + that.url)
		          				}
		          			},600)
	          			}else{
	          				Toast("上传失败")
	          			}
	          			console.log(JSON.stringify(res))
	          		},
	          		error:function(res){
	          			console.log(JSON.stringify(res))
	          		}
	          	})
			}

	    }

后端处理代码（thinkphp）

public function Upload($type='0',$user='0',$cut='0',$index='0',$name='0'){
		header("Access-Control-Allow-Origin: *");
                header('Access-Control-Allow-Credentials: true');
                header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型\
		$file = request()->file('file');
		$tmpfile = $_FILES['file']['tmp_name'];
		$nameArr = explode(".", $name);
		$mad5File = md5($nameArr[0]);
		$mad5FileType = $nameArr[1];
		$filetype = pathinfo($name, PATHINFO_EXTENSION);
			if($file){
				if (file_exists(ROOT_PATH.'public/uploads/'. "$user/")) {

                    }else{
                        mkdir(ROOT_PATH."public/uploads/" . "$user/", 0700);
                    }
                    $cutfile = ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType.$index;
                    $filename = ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType;
                    move_uploaded_file($tmpfile,$cutfile);
                    
                    if($index == ($cut-1)){
                    	for ($i=0; $i < $cut; $i++) { 
                    		$blob = file_get_contents(ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType.$i);
                    		file_put_contents(ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType,$blob, FILE_APPEND | LOCK_EX);
					    }
					    
					    for($i=0; $i < $cut; $i++){
					      @unlink(ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType.$i);
					    }
					    return json(ajax([$filename,$index,$cut],10015,'上传完毕',1));
                    }
		    }
	    return json(ajax([$filename,$index,$cut],10014,'上传中',1));
	}

上传时候的请求截图;

上传完成，返回参数中的数组[1〜18,18]，这里可以当做是前台呈现上传进度条的参数。

服务器在上传过程中，会在最后一个分片上传完毕之后，读取之前的分片，并一一写入到新的文件末尾，最后将上传的带有数字后缀的文件删除掉。