js 上传进度

在JavaScript中实现文件上传进度显示，通常涉及到HTML5的XMLHttpRequest对象或者使用Fetch API结合ReadableStream来监控上传进度。以下是相关的基础概念、优势、类型、应用场景以及如何实现上传进度的详细解释：

基础概念

上传进度：指文件从客户端传输到服务器的过程中，已传输的数据量占总数据量的比例。

优势

用户体验：让用户知道文件上传的状态，避免用户长时间等待而不知所措。
性能监控：开发者可以通过上传进度来监控和优化上传性能。

类型

基于XMLHttpRequest的上传进度：通过监听XMLHttpRequest对象的progress事件来实现。
基于Fetch API的上传进度：通过读取响应体的ReadableStream来实现。

应用场景

文件上传功能
视频上传
大文件分片上传

实现方法

基于`XMLHttpRequest`的上传进度

function uploadFile(file) {
    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('file', file);

    xhr.open('POST', '/upload', true);

    xhr.upload.addEventListener('progress', function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
        }
    });

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('上传成功');
        } else {
            console.log('上传失败');
        }
    };

    xhr.send(formData);
}

基于`Fetch API`的上传进度

async function uploadFileWithFetch(file) {
    const url = '/upload';
    const response = await fetch(url, {
        method: 'POST',
        body: file,
        headers: {
            'Content-Type': file.type
        }
    });

    if (!response.ok) {
        throw new Error('上传失败');
    }

    const reader = response.body.getReader();
    const contentLength = +response.headers.get('Content-Length');
    let receivedLength = 0;

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        receivedLength += value.length;
        const percentComplete = (receivedLength / contentLength) * 100;
        console.log(`上传进度: ${percentComplete.toFixed(2)}%`);
    }

    console.log('上传成功');
}

遇到的问题及解决方法

progress事件不触发：
- 确保服务器端正确处理了文件上传请求。
- 确保XMLHttpRequest对象的open方法中第三个参数设置为true（异步请求）。

进度计算不准确：
- 确保event.lengthComputable为true，即服务器返回了Content-Length头。
- 对于大文件分片上传，需要分别计算每个分片的进度并累加。
浏览器兼容性：
- Fetch API的进度监控在较新的浏览器中支持较好，对于旧版浏览器可以使用XMLHttpRequest。

通过以上方法，可以在JavaScript中实现文件上传进度的监控，提升用户体验和开发效率。

页面内容是否对你有帮助？

有帮助

没帮助

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js 上传进度

基础概念

优势

类型

应用场景