Fetch 上传多个文件

在现代Web开发中，上传文件是一个常见的需求。借助Fetch API，我们可以轻松地实现这一功能。本章节将详细介绍如何使用Fetch API来上传多个文件。

使用HTML表单选择文件

首先，我们需要一个HTML表单让用户选择要上传的文件。这里我们创建一个简单的表单，允许用户选择多个文件：

<form id="file-upload-form">
    <input type="file" name="files[]" multiple />
    <button type="submit">上传文件</button>
</form>

在这个表单中，<input type="file"> 元素使用了 multiple 属性，这意味着用户可以选择多个文件进行上传。

监听表单提交事件

接下来，我们需要监听表单的提交事件，并在事件触发时阻止默认行为，然后处理文件上传逻辑：

// www.javascriptcn.com code example
document.getElementById('file-upload-form').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    const formData = new FormData(this); // 获取表单数据

    // 使用Fetch API发送请求
    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('成功上传文件：', data);
    })
    .catch(error => {
        console.error('上传失败：', error);
    });
});

在这个例子中，我们首先通过 event.preventDefault() 方法阻止了表单的默认提交行为。接着，我们使用 FormData 对象来收集表单中的文件数据，并将其作为请求体的一部分发送给服务器。

处理服务器响应

服务器接收到请求后，会处理这些文件并返回相应的结果。客户端需要解析服务器的响应，以便了解文件是否上传成功。在上面的例子中，我们假设服务器返回的是JSON格式的数据，并通过 .json() 方法解析了响应体。

处理文件上传进度

为了提供更好的用户体验，我们可以显示文件上传的进度。这可以通过监听 progress 事件来实现：

// www.javascriptcn.com code example
const form = document.getElementById('file-upload-form');
const submitButton = form.querySelector('button[type="submit"]');

submitButton.addEventListener('click', function() {
    const formData = new FormData(form);

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            const percentComplete = (event.loaded / event.total) * 100;
            console.log(`已上传：${percentComplete.toFixed(2)}%`);
        }
    };

    xhr.onloadstart = function() {
        console.log('开始上传...');
    };

    xhr.onloadend = function() {
        console.log('上传结束');
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log('成功上传文件：', JSON.parse(xhr.responseText));
        } else {
            console.error('上传失败：', xhr.statusText);
        }
    };

    xhr.onerror = function() {
        console.error('上传过程中发生错误');
    };

    xhr.send(formData);
});

在这个示例中，我们使用了 XMLHttpRequest 对象来发送请求，并通过 onprogress 事件监听器来显示上传进度。

处理错误和异常

在文件上传过程中可能会出现各种错误或异常情况。为了确保应用程序的健壮性，我们需要妥善处理这些情况。在上述代码中，我们已经通过 onerror 事件处理程序捕获了请求过程中的错误。

总结

通过以上步骤，我们可以使用Fetch API轻松地实现多文件上传功能。从表单设计到文件选择、再到文件上传及进度显示，每一步都至关重要。希望本章节的内容能够帮助你在实际项目中更好地运用Fetch API来实现文件上传功能。