来源：京东技术

导读

在网络应用中，大文件上传是一个技术挑战。本文详细解析了大文件上传的核心原理，并探讨了多种实现方案。从基本的文件分割、断点续传到复杂的并行上传，文章涵盖了一系列技术细节和最佳实践，包括如何处理网络波动、提高数据传输效率等关键问题。此外，还介绍了相关的前端和后端技术支持。无论是开发者还是架构师，这篇文章都将提供有力的技术指导和实战参考，帮助读者高效解决大文件上传问题。

// 获取identifier，同一个文件会返回相同的值function createIdentifiert(file) {    return file.name + file.size}
let file = document.querySelector("[name=file]").files[0];const LENGTH = 1024 * 1024 * 1;//1MBlet chunks = slice(file, LENGTH);
// 获取对于同一个文件，获取其identifierlet identifier = createIdentifier(file);
let tasks = [];chunks.forEach((chunk, index) => {    let fd = new FormData();    //传递file对象    fd.append("file",chunk);    // 传递identifier    fd.append("identifier", identifier);    // 传递切片索引值    fd.append("chunkNumber", index + 1);    // 传递切片总数    fd.append(“totalChunks”, chunks.length);        tasks.push(post("/mkblk.php", fd));});
// 所有切片上传完毕后，调用mkfile接口Promise.all(tasks).then(res => {    let fd = new FormData();    fd.append("identifier", identifier);    fd.append("totalChunks",chunks.length);    post("/mkfile.php", fd).then(res => {        console.log(res);    })});

// mkblk.php接口$identifier = $_POST['identifier'];$path = './upload/' . $identifier;if(!is_dir($path)){    mkdir($path);}// 把同一个文件的切片放在相同的目录下$filename = $path . '/' . $_POST['chunkNumber’];// 清除保存的切片$res = move_uploaded_file($_FILES['file']['tmp_name'], $filename);
//接下来是mkfile.php接口的实现，这个接口会在所有切片上传后调用用来合并文件
// mkfile.php接口$identifier = $_POST['identifier'];$totalChunks= (int)$_POST['totalChunks'];
//合并后的文件名$filename = './upload/' . $identifier . '/file.jpg’; // 开始合并文件for($i = 1; $i <= $totalChunks; ++$i){    $file = './upload/'.$ identifier. '/' .$i; // 读取单个切块    // 获取文件内容    $content = file_get_contents($file);    if(!file_exists($filename)){        //创建一个用于读写的空文件        $fd = fopen($filename, "w+");    }else{        //追加到一个文件，写操作向文件末尾追加数据。如果文件不存在，则创建文件。        $fd = fopen($filename, "a");    }    fwrite($fd, $content);// 将切块合并到一个文件上}

// 获取已上传切片记录function getUploadSliceRecord(context){    let record = localStorage.getItem(context)    if(!record){        return []    }else {        return JSON.parse(record)     }}
// 保存已上传切片function saveUploadSliceRecord(context, sliceIndex){    let list = getUploadSliceRecord(context)    list.push(sliceIndex)    localStorage.setItem(context, JSON.stringify(list))}
let context = createContext(file);
// 获取上传记录let record = getUploadSliceRecord(context);let tasks = [];chunks.forEach((chunk, index) => {    // 已上传的切片则不再重新上传    if(record.includes(index)){        return    }
    let fd = new FormData();    fd.append("file", chunk);    fd.append("context", context);    fd.append("chunk", index + 1);
    let task = post("/mkblk.php", fd).then(res=>{        // 上传成功后保存已上传切片记录        saveUploadSliceRecord(context, index)        record.push(index)    })    tasks.push(task);});...