Bootstrap

前端大文件上传处理方案

前端大文件上传处理方案是一种用于上传大型文件的技术方案。它通常包括将大型文件分成小块,每块大小通常为几兆到几十兆,然后将这些小块逐个上传,最终在服务器上重新组合成原始文件。以下是一些常见的前端大文件上传处理方案:

  1. 分片上传:这是一种将大文件分成小块上传的方案。每个分片都由独立的请求上传,可以在上传过程中暂停和恢复。
  2. 断点续传:这是一种基于分片上传的方案,它可以在上传过程中捕获上传的状态,以便在上传过程中发生错误或中断时恢复上传。这种方案通常需要在服务器端进行支持。
  3. 使用 WebRTC 进行点对点文件传输:这是一种直接将文件上传到另一个设备或浏览器的方案。这种方案可以避免上传到服务器的延迟和带宽限制,但可能会涉及到安全风险。
  4. 使用第三方服务:这种方案可以使用云存储服务(例如 Amazon S3、Google Cloud Storage、Microsoft Azure 等)或者其他第三方服务(例如 Dropzone.js、Uppy 等)来处理大文件上传。这种方案通常需要支付服务费用。
  5. 流式上传:将文件分成多个流,逐个上传,减小服务器压力和传输时间。

以上方案各有优缺点,需要根据具体场景和需求选择合适的方案,我在这里就只提供一个分片上传代码示例。

    <input type="file" id="file-input">
    <button onclick="upload()">上传文件</button>

    const upperLimitSize = 1024 * 1024 * 50 // 50兆
    function upload() {
        const fileDom = document.querySelector('#file-input')
        // 首先第一步先获取文件对象
        const file = fileDom.files[0]
        // 判断是否文件大小超过上限,如果没有就直接做上传操作
        if (file.size < upperLimitSize) {
            // 直接上传文件的操作
            console.log('上传成功')
            return
        }
        // 文件切片相关的处理
        let currentChunk = 0 // 当前片数
        const chunkSize = 1024 * 1024 * 5// 每个切片的大小
        const totalChunks = Math.ceil(file.size / chunkSize) // 总共需要切多少片
        /**
         * @param start 起始
         * @param end 结束
         * @param chunkIndex 第几个切片
        */
        function uploadChunk(start, end, chunkIndex) {
            console.log('start, end, chunkIndex: ', start, end, chunkIndex);
            console.log(file.slice(start, end), file.size, end) // file.slice(start, end)这是每次需要上传的片段

        }
        // 切片后分别上传
        while (currentChunk < totalChunks) {
            let start = currentChunk * chunkSize
            let end = Math.min(((currentChunk + 1) * chunkSize), file.size)
            uploadChunk(start, end, currentChunk)
            currentChunk++
        }
    }

;