如何避免S3直传场景下表单提交时视频重复上传至服务器？

问题核心：当前表单包含文件输入框且设置了enctype="multipart/form-data"，默认提交行为会把所有表单控件（包括文件字段）一并发送到后端。哪怕你已经通过JS把视频传到S3，表单提交时还是会重复上传这些文件。

以下是几种可行的解决方法：

方法1：提交前禁用/移除文件输入框 #

监听表单提交事件，在提交前把视频文件输入框禁用或从表单中移除，让表单提交时不包含这些文件字段。

代码示例：

document.getElementById('mainform').addEventListener('submit', function(e) {
  // 获取两个视频输入框
  const videoInputs = document.querySelectorAll('#video1-S3-submit, #video2-S3-submit');
  videoInputs.forEach(input => {
    // 禁用输入框，表单不会提交处于禁用状态的控件
    input.disabled = true;
    // 也可以直接从表单移除：input.remove();
  });
});

方法2：使用单独的隐藏表单提交文本字段 #

把需要提交的文本字段放到一个隐藏的独立表单中，点击提交按钮时，提交这个隐藏表单而非原表单，彻底隔离文件字段和文本提交逻辑。

步骤1：添加隐藏表单 #

在原表单外新增一个隐藏表单：

<form action="{{ request.path }}" method="post" id="text-submit-form" style="display: none;">
  <input type="text" name="variable1-ServerSubmit" id="hidden-var1">
  <input type="text" name="variable2-ServerSubmit" id="hidden-var2">
</form>

步骤2：修改提交按钮的点击事件 #

document.querySelector('.submit').addEventListener('click', function(e) {
  // 阻止原表单的默认提交行为
  e.preventDefault();
  
  // 将原表单的文本值同步到隐藏表单
  const var1Value = document.querySelector('[name="variable1-ServerSubmit"]').value;
  const var2Value = document.querySelector('[name="variable2-ServerSubmit"]').value;
  document.getElementById('hidden-var1').value = var1Value;
  document.getElementById('hidden-var2').value = var2Value;
  
  // 提交隐藏表单
  document.getElementById('text-submit-form').submit();
});

方法3：用AJAX异步提交文本字段 #

完全绕过表单的默认提交行为，通过AJAX把文本字段的数据单独发送到后端，全程不涉及任何文件上传操作。

代码示例：

document.getElementById('mainform').addEventListener('submit', async function(e) {
  e.preventDefault(); // 阻止默认表单提交
  
  // 获取文本字段的值
  const variable1 = document.querySelector('[name="variable1-ServerSubmit"]').value;
  const variable2 = document.querySelector('[name="variable2-ServerSubmit"]').value;
  
  try {
    const response = await fetch(this.action, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        // 如果后端需要CSRF验证，记得添加对应的请求头，比如Django的CSRF Token：
        // 'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
      },
      body: new URLSearchParams({
        'variable1-ServerSubmit': variable1,
        'variable2-ServerSubmit': variable2
      })
    });
    
    if (response.ok) {
      // 提交成功后的逻辑，比如跳转页面
      window.location.href = '/your-success-page';
    } else {
      console.error('提交失败:', await response.text());
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
});

额外注意事项 #

如果视频上传是异步完成的，建议在表单提交前添加校验，确保视频已经成功上传到S3，避免出现文本提交了但视频上传未完成的情况。比如设置一个全局标志位，在视频上传完成后标记为true：

let videosUploaded = false;

// 假设你的S3上传完成回调里设置这个标志
function onS3UploadComplete() {
  videosUploaded = true;
}

document.getElementById('mainform').addEventListener('submit', function(e) {
  if (!videosUploaded) {
    e.preventDefault();
    alert('视频还在上传中，请稍等');
    return;
  }
  // 继续执行提交逻辑...
});

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