大文件上传-优快云博客

文章介绍了大文件上传时遇到的慢速问题，提出了解决方案——通过切片上传（分片上传）来提高效率。利用FormData和axios，将大文件分割成小块进行逐个上传，并通过断点续传确保上传的完整性和效率。最后，后端负责合并分片，完成整个文件的上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件上传方式

HTML表单的方式

FormData对象

const formdata = new FormData()
form.append('file', 值)

为什么大文件上传：在一些文件比较大时，使用普通的方式上传太慢，影响用户体验

解决方法

切片上传（分片上传）

实现代码：

const token = ''
        const upload = (file, chunkSize) => {
            if (!file) {
                alert('请选择文件')
                return
            }
            const start = 0 // 开始的字节
            const end = chunkSize // 结束字节
            const chunkTotal = Math.ceil(file.size / chunkSize) // 分片总数量
            let uploadChunks = 0 // 当前分片
            console.log(uploadChunks)
            const uploadChunk = () => {
                if (uploadChunks < chunkTotal) {
                    const files = file.slice(start, end)
                    const formdata = new FormData()
                    formdata.append('bigfile', files, file.name + '-' + uploadChunks)
                    axios({
                        method: 'post',
                        url: 'http://43.136.34.132/api/bigfile',
                        headers: {
                            'Content-Type': 'multipart/form-data',
                            'Authorization': token
                        },
                        data: formdata,
                    }).then(res => {
                        start = end + start
                        end = start + chunkSize
                        uploadChunks++
                        uploadChunk()
                    })
                } else {
                    // 开始后的
                    axios({
                        method: 'get',
                        url: 'http://43.136.34.132/api/mergefile',
                        params: { filename: file.name },
                    }).then(res => {
                        console.log('res', res)
                    })
                }
            }
            uploadChunk()
        }