使用Rackspace表单POST上传多文件时Content-type错误的解决方法

该问题的核心原因是原生表单批量提交多文件时，部分浏览器会错误复用前一个文件的MIME类型标识，导致后续文件的Content-Type上传错误，可通过以下三种方案修复：

• 方案1：使用FormData接口手动构造上传请求，单独指定每个文件的Content-Type
  放弃原生表单默认提交逻辑，监听表单提交事件，通过JavaScript读取每个文件，手动插入到FormData对象中，上传时指定每个文件对应的MIME类型，示例代码如下：

document.getElementById('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData();
    // 填充原有表单隐藏字段
    formData.append('redirect', document.querySelector('input[name="redirect"]').value);
    formData.append('max_file_size', document.querySelector('input[name="max_file_size"]').value);
    formData.append('max_file_count', document.querySelector('input[name="max_file_count"]').value);
    formData.append('expires', document.getElementById('rack_expire').value);
    formData.append('signature', document.getElementById('rack_signature').value);
    // 逐个添加文件，修正MIME类型
    const fileInputs = document.querySelectorAll('input[type="file"]');
    fileInputs.forEach((input, index) => {
        if (input.files.length > 0) {
            const file = input.files[0];
            let mimeType = file.type;
            const ext = file.name.split('.').pop().toLowerCase();
            // 基于后缀兜底修正MIME类型，避免浏览器识别错误
            const mimeMap = {
                'png': 'image/png',
                'jpg': 'image/jpeg',
                'jpeg': 'image/jpeg',
                'gif': 'image/gif',
                'pdf': 'application/pdf'
            };
            if (mimeMap[ext]) mimeType = mimeMap[ext];
            formData.append(`file_${index + 1}`, file, file.name);
        }
    });
    // 提交上传请求
    fetch(this.action, {
        method: 'POST',
        body: formData
    }).then(res => {
        if (res.ok) {
            window.location.href = document.querySelector('input[name="redirect"]').value;
        }
    });
});

• 方案2：新增表单隐藏字段为每个文件指定Content-Type
  Rackspace表单上传接口原生支持content_type_文件序号的参数，服务端会优先使用该参数设置的MIME类型。首先在原有表单中新增对应隐藏字段：

<!-- 新增5个隐藏字段对应5个文件的Content-Type配置 -->
<input type="hidden" name="content_type_1" id="content_type_1">
<input type="hidden" name="content_type_2" id="content_type_2">
<input type="hidden" name="content_type_3" id="content_type_3">
<input type="hidden" name="content_type_4" id="content_type_4">
<input type="hidden" name="content_type_5" id="content_type_5">

再添加JavaScript监听文件选择事件，自动填充对应Content-Type值：

const fileInputs = document.querySelectorAll('input[type="file"]');
fileInputs.forEach((input, index) => {
    input.addEventListener('change', () => {
        if (input.files.length > 0) {
            const file = input.files[0];
            let mimeType = file.type;
            const ext = file.name.split('.').pop().toLowerCase();
            const mimeMap = {
                'png': 'image/png',
                'jpg': 'image/jpeg',
                'jpeg': 'image/jpeg',
                'gif': 'image/gif',
                'pdf': 'application/pdf'
            };
            if (mimeMap[ext]) mimeType = mimeMap[ext];
            document.getElementById(`content_type_${index + 1}`).value = mimeType;
        }
    });
});

该方案不需要修改原有表单的提交逻辑，改动量最小。

• 方案3：配置Rackspace容器MIME自动修正规则
  不需要修改前端代码，直接在Rackspace云文件的对应容器配置中开启基于文件后缀的MIME类型覆盖功能，服务端接收文件后会忽略上传请求携带的Content-Type，自动根据文件后缀设置正确的MIME类型，从根源避免该类错误。

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