Fetch 上传单个文件-JavaScript中文网-JavaScript教程资源分享门户

Fetch 上传单个文件

使用 Fetch API 上传单个文件是一个常见的任务，特别是在现代 Web 开发中。下面是如何使用 Fetch API 上传文件的基本步骤：

准备工作

首先，你需要一个 <input type="file"> 元素来让用户选择要上传的文件。这个元素通常看起来像这样：

<input type="file" id="fileInput">

获取文件对象

当用户选择了文件后，你可以通过监听 change 事件来获取文件对象：

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0]; // 用户选择的第一个文件
    if (file) {
        uploadFile(file);
    } else {
        console.log('没有选择文件');
    }
});

使用 Fetch API 上传文件

接下来，定义 uploadFile 函数来处理文件上传：

// javascriptcn.com 代码示例
function uploadFile(file) {
    const url = 'https://example.com/upload'; // 替换为你的服务器地址

    // 创建 FormData 对象
    const formData = new FormData();
    formData.append('file', file); // 将文件添加到 FormData 对象中

    // 使用 Fetch API 发送 POST 请求
    fetch(url, {
        method: 'POST',
        body: formData,
        // 如果需要传递额外的头部信息，可以在这里添加
        headers: {
            // 注意：不要在此处设置 'Content-Type' 头部，因为 Fetch API 会自动设置它为 multipart/form-data
            // 'Content-Type': 'multipart/form-data', // 错误示例
        },
    })
    .then(response => response.json()) // 假设服务器返回的是 JSON 格式的数据
    .then(data => {
        console.log('成功:', data);
    })
    .catch(error => {
        console.error('错误:', error);
    });
}

注意事项

Content-Type：当你使用 FormData 对象时，不要手动设置 Content-Type 为 multipart/form-data，因为 Fetch API 会自动设置正确的边界字符串（boundary string），而手动设置可能会导致问题。
服务器端处理：确保服务器端正确处理上传的文件。这可能涉及到保存文件到磁盘、检查文件类型和大小等操作。
错误处理：使用 .catch 方法捕获并处理任何可能发生的错误，比如网络请求失败或服务器返回错误状态码。

纠错
反馈