前端大檔案上傳/分片上傳

卡优卡1255發表於2024-07-08
前端

前置知識

  1. File物件：表示一組檔案，我們使用<input type="file" /> 去選擇檔案時，這些檔案就被儲存在File物件中。

  2. Blob物件：表示二進位制資料，常用於儲存大型資料物件（如影像、音訊等）。File物件是Blob物件的一個子類，它繼承了Blob物件的所有屬性和方法。

  3. formData物件：前端先將檔案儲存在formData當中，才能傳輸給後端。

點選檢視程式碼 
<!DOCTYPE html>
<html lang="en">

<body>
    <div class="container">
        <h1>大檔案上傳</h1>
        <input type="file" id="fileInput" accept="image/*">
        <button id="uploadButton">切片上傳</button>
        <br>
    </div>
    <script>
        //chunk就是一個切片，也就是小檔案
        async function uploadChunk (chunk) {
            const formData = new FormData()
            formData.append('fileName', 'test.jpg') // 這裡會在上傳時候加上
            formData.append('file', chunk)

            //這裡的地址可以替換為你的後端地址
            const response = await fetch('https://file.io', {
                method: 'POST',
                body: formData
            })

            const result = await response.json()
            return result
        }

        document.getElementById('uploadButton').addEventListener('click', async function () {
            const fileInput = document.getElementById('fileInput')
            const file = fileInput.files[0]
            const chunkSize = 100 * 1024 // 100KB
            const totalChunks = Math.ceil(file.size / chunkSize)

            for (let i = 0; i < totalChunks; i++) {
                const start = i * chunkSize
                const end = Math.min(start + chunkSize, file.size)
                const chunk = file.slice(start, end)
                //上傳一個切片
                const result = await uploadChunk(chunk)

            }
        });
    </script>
</body>

</html>

踩坑：

這樣獲取出來的files是一個fileList,需要手動取出第0個，才是具體的file物件

var input = document.getElementById("fileInput")
var files = input.files

參考：https://blog.csdn.net/wtswts1232/article/details/130663725

相關文章