当前位置 博文首页 > 用php如何解决大文件分片上传问题

    用php如何解决大文件分片上传问题

    作者:A黄俊辉A 时间:2021-08-23 18:53

    如果上传的文件只有小于10M的话, 就没必要考虑这样的做法, 直接在 php.ini中更改一下 upload_max_filesize = 10m post_max_size = 10m 这样就可以了, 下面我们来说一说php上传超大的文件

    前提

    首先, 上传超大的文件, 前端要和后端相互配合文件上传要使用 ajax 的方法, 而不是 form 的 submit的方式

    思想

    前端把file文件对象按一定的大小 分割成一定大小的文件(如按 2M 或 5M来分割), 对分割后的文件, 一个个的上传到后端去, 后端接收到分片文件后,把它们先放到一个临时的目录下, 在收到前端完成的数据请求的时候, 把临时目录中的文件组装起来成一个新的文件, 保存后, 把临时目录下的文件删除掉就可以了

    代码

    html

    <div class="a">
              上传<input  type="file" name="myfile"/>
       </div>

    这里要说明一下,没有使用 submit 上传, 使用 ajax上传

    javascript

    <script>
    	$(function(){
    		let myfile = document.getElementById("myfile");
    		myfile.onchange = function(){
    			let file = myfile.files[0];		//这里可以得到上传的文件对象
    			let length = 1024 * 1024 * 5;   //这里是每一个分片的大小
    			let total_number = Math.ceil(file.size/length) //使用进一法, 来确定分片的个数
    			let start = 0;			//分片的初始位置
    			let end = length;		//分片的结束位置
    			let parr = [];         //这里为promise.all方法准备一个数组;
    			for(let i = 1;i<=total_number;i++){
    				//这里开始分片, 并且把每一个分片上传到服务器
    				let bolb = file.slice(start,end);  //得到一个分片
    				start = end;				//调整下一个分片的起始位置
    				end = start+length;			//调整下一个分片的结束位置
    				if(end > file.size){
    					end=file.size;		//这里对最后的一个分片结束位置进行调整
    				}
    				let formdata = new FormData();  //创建一个FormData对象, 准备传送数据
    				formdata.append("file",blob);   //据分片数据放入 formdata
    				formdata.append("tempfilename",i+"_"+file.name)  //同时为这个分片设置一个名称, 其中的 i 可以帮助后端进行排序处理
    				
    				//formdata组装好之后, 调用 pro() 函数, 返回一个promise对象, 并把它放入 parr 数组中, 方便后面的 promise.all方法使用
    				parr.push(pro(formadata));
    			}
    			//以上for 循环结束之后,  parr数组中就全部是  分片上传的 promise的对象了, 此时我们使用promise.all 方法, 等待所有上传都成功执行后, 再向服务器发送一个请求, 也就是上传完成, 让服务器组装分片的请求
    			Promise.all(parr).then(res=>{
    				if(res.length == parr.length){   //如果返回成功的数组长度 和 parr的数组长度相等,说明分片全部上传成功
    					//此时对上传接口再次发送请求, 同时把 上传的文件名带上, 方便后台查找要组装的分片文件名, 因为是请求同一个上传接口所以, 我们还要传一个 flag=1  表示这是一个数据组装的请求
     $.ajax({
                        type:"post",
                        url:"http://fastadmin.test/index/upload/getupload",
                        data:{flag:1,filename:file.name},  //这里 flag=1表示上传完成,请求组装, filename:表示要组成哪一组文件分片
                        success:function(res){
                            if(res.length == parr.length){
                                console.log(111);
                            }
                        },
                        fail: function () {
                            reject()
                        }
                    })
    				}
    			})
    		}
    	})
    	//这个函数用来上传分片文件, 返回的是一个 promise 对象, 方便后面使用  promise.all还判断所有分片是否是上传成功的
    	//这里要说明一下, $.post() 是不可以上传文件的, 只能用$.ajax() 并且要把 contentType:false和processData:false 带上
        function pro(formData){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    type:"post",
                    url:"http://fastadmin.test/index/upload/getupload",  //后台上传文件的地址
                    data:formData,
                    contentType: false,    //这个不能少, ajax上传文件是不能少的
                    processData: false,	   //这个不能少, ajax上传文件必传 false
                    success:function(res){
                        resolve(res)
                    },
                    fail: function () {
                        reject()
                    }
                })
            })
        }		
    </script>
    jsjbwy
    下一篇:没有了