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 函数来处理文件上传：

-- -------------------- ---- -------
-------- ---------------- -
    ----- --- - ----------------------------- -- ----------

    -- -- -------- --
    ----- -------- - --- -----------
    ----------------------- ------ -- ------ -------- ---

    -- -- ----- --- -- ---- --
    ---------- -
        ------- -------
        ----- ---------
        -- ---------------------
        -------- -
            -- ---------- -------------- ----- ----- --- ------- -------------------
            -- --------------- ---------------------- -- ----
        --
    --
    -------------- -- ---------------- -- --------- ---- -----
    ---------- -- -
        ------------------ ------
    --
    ------------ -- -
        -------------------- -------
    ---
-

注意事项

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