通過input的onchange事件獲取到file對象，在通過file對象的slice方法，類似于array的slice方法，將file對象分割成多個Blob對象，每個Blob對象都是一個單獨的文件，可以通過ajax上傳到服務(wù)器，具體實現(xiàn)方法如下

    <input type="file">
    <script>
        const input = document.querySelector('input')
        input.onchange = () => {
            const file = input.files[0] // 獲取到的file對象
            const fileList = handleFile(file, 60)
            // ...對應(yīng)的文件上傳處理操作
        }

        // 將file對象處理成固定大小的文件的工具函數(shù)
        const handleFile = (file, fileSize) => {
            const result = []
            for (let i = 0; i < file.size; i += fileSize) {
                result.push(file.slice(i, i + fileSize))
            }
            return result
        }
    </script>

如果分片上傳時被打斷了（頁面刷新，網(wǎng)絡(luò)連接錯誤），如何知道哪一部分文件上傳了，哪一部分文件沒有上傳？

利用hash算法，生成對應(yīng)的hash值存儲在數(shù)據(jù)庫，上傳文件的時候?qū)?dāng)前文件的hash值與服務(wù)器返回的hash值進行比較，就能知道文件是否上傳過，可以借助第三方庫：spark-md5

    <input type="file">
    <script src="https://cdn.bootcdn.net/ajax/libs/spark-md5/3.0.2/spark-md5.js"></script>
    <script>
        const input = document.querySelector('input')
        input.onchange = async () => {
            const file = input.files[0] // 獲取到的file對象
            const fileList = handleFile(file, 60)
            const result = await hash(fileList)
            // ...對應(yīng)的文件上傳處理操作
        }

        // 生成hash值
        const hash = (fileList = []) => {
            return new Promise((resolve, reject) => { // 封裝成異步函數(shù)
                const spark = new SparkMD5()
                const read = i => {
                    if (i >= fileList.length) {
                        resolve(spark.end())
                        return
                    }
                    const blob = fileList[i]
                    const reader = new FileReader()
                    reader.onload = e => {
                        const byte = e.target.result
                        spark.append(byte)
                        read(i + 1)
                    }
                    reader.readAsArrayBuffer(blob)
                }
                read(0)
            })
        }

        // 將file對象處理成固定大小的文件的工具函數(shù)
        const handleFile = (file, fileSize) => {
            const result = []
            for (let i = 0; i < file.size; i += fileSize) {
                result.push(file.slice(i, i + fileSize))
            }
            return result
        }
    </script>