使用Web Worker实现多文件上传时遭遇405错误，求排查方案

405错误表示服务器不允许对目标路径使用PUT请求方法，结合你的代码和配置，问题主要出在以下几个方面，对应解决方法如下：

1. 服务器未配置PUT请求支持 #

/uploads是一个文件夹，默认情况下大多数Web服务器（如Apache、Nginx）不会直接处理针对文件夹的PUT请求，也不会自动将PUT请求的内容保存到文件夹中。

• 若使用Apache：需要启用mod_dav模块，并在uploads目录配置Dav On，或者编写后端脚本（如PHP、Node.js）接收PUT请求并处理文件写入逻辑。
• 若使用Nginx：需要配置对应的location块，通过后端脚本（如Node.js、PHP）处理PUT请求，Nginx本身不直接处理文件写入操作。
• 核心结论：你需要一个后端接口来处理上传逻辑，而非直接请求文件夹路径。

2. 请求头Content-Type设置错误 #

你在fetch中手动将Content-Type设为text/plain，但上传的是任意类型的文件，这会导致服务器无法正确解析文件内容。正确的处理方式：

• 去掉手动设置的Content-Type头，让fetch自动根据File对象设置对应的MIME类型；
• 如果服务器期望multipart/form-data格式，需用FormData包装文件：

  const formData = new FormData();
  formData.append('file', file);
  fetch('/upload-handler', {
    method: 'POST', // 多数后端默认支持POST处理上传
    body: formData
  })
  

3. 权限配置的误区 #

uploads文件夹设置777是文件系统权限，仅能保证服务器进程拥有写入该文件夹的权限，但前提是服务器程序（如后端脚本）存在写入文件的逻辑，并非直接通过PUT请求到文件夹就能自动保存文件。

修正后的代码示例 #

调整后的file_upload.js #

function upload(file){
    self.postMessage('uploading');
    
    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload-handler.php', { // 替换为你的后端处理脚本路径
        method: 'POST',
        body: formData
    })
    .then(response => {
        if(response.ok){
            return response.text();
        }else{
            throw Error('Server returned '+response.status+' - '+response.statusText);
        }
    })
    .then(response_text => {
        self.postMessage('response '+response_text);
    })
    .catch(error => {
        self.postMessage(error.message);
    });
}

self.onmessage = function(e){
    self.postMessage('received');
    const file = e.data;
    upload(file);
}

后端处理脚本示例（PHP版upload-handler.php） #

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['file'])) {
    $uploadDir = './uploads/';
    $uploadFile = $uploadDir . basename($_FILES['file']['name']);
    
    if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile)) {
        echo "File uploaded successfully";
    } else {
        http_response_code(500);
        echo "Failed to upload file";
    }
} else {
    http_response_code(400);
    echo "Invalid request";
}
?>

内容的提问来源于stack exchange，提问作者Paddy Hallihan