基于JS与PHP的分片上传与断点续传

最新推荐文章于 2023-10-28 14:20:46 发布

LostLord_L

最新推荐文章于 2023-10-28 14:20:46 发布

阅读量371

点赞数

本文链接：https://blog.csdn.net/LostLord_L/article/details/88568834

版权

本文介绍了如何使用前端JS和后端PHP实现大文件的分片上传及断点续传功能。前端利用slice方法分割文件，通过formData进行传输；后端采用TP框架，处理文件接收与合并。断点续传包括验证文件和获取中断节点，确保上传的连续性。

摘要由CSDN通过智能技术生成

对于目前大文件上传，较为合理的方式就是分片上传。get方式仅可以传输几K的数据，POST理论上是可以传输无限的数据，但会有服务器的限制，php.ini里面的upload_max_filesize会对你的文件上传数据大小加以限制，一旦超过这个数值，服务器就会拒绝接收，所以前端要进行大文件分割，分成文件块进行上传。

前端JS实现

对于分片上传，最重要的就是slice方法，此方法可以分割文件。
fileBlock = file.slice(start, end), fileBlock即为大小为（end - start）分割好的文件块。
对于上传，不能使用json进行传输数据，而要使用formData进行传输，也就类似于直接点击form表单的submit的按钮进行上传。
因为是前端是基于vue写的，会有一些变量不在方法中，在方法中会进行解释。
我是基于axios封装的ajax进行上传

分片上传

将上传文件封装成一个方法

function uploadSlice (file, skip) {
    const blockSize = 1024 * 1024   // 一个文件块的大小为1M
    let totalNum = Math.ceil(file.size / blockSize)     // 可分为多少文件块
    let formData = new FormData()   // 不用json包装数据，而使用formData
    let config = {
        headers = {
            'Content-Type': 'multipart/form-data'   // 将请求头的Content-Type改为这个，后端才能接收到上传的文件块的二进制流
        }
    }
    let nextSize = Math.min((skip + 1) * blockSize, file.size)
    let fileData = file.slice(skip * blockSize, nextSize)   // fileData就是分割好的blob对象，可进行二进制流传输
    formData.append('file', fileData)   // append方法可以在formData对象进行数据追加
    formData.append('blobNum', skip + 1)    // blobNum就是目前上传到第几块，以便后端判断是否上传完成
    formData.append('totalNum&