Flask页面使用fetch()上传文件后无法自动刷新问题求助

方案一：修复自定义post()函数以支持文件上传 #

你的自定义post()函数无法处理文件，核心问题有两个：一是用hidden类型input传递File对象无效（File无法直接赋值给input的value）；二是表单未设置文件上传必需的enctype="multipart/form-data"。修改后的函数如下：

function post(path, params, method='post') {
  const form = document.createElement('form');
  form.method = method;
  form.action = path;
  // 文件上传必须指定该编码类型
  form.enctype = 'multipart/form-data';

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      let field;
      if (params[key] instanceof File) {
        // 针对File对象创建file类型input
        field = document.createElement('input');
        field.type = 'file';
        field.name = key;
        // 通过DataTransfer设置文件
        const fileTransfer = new DataTransfer();
        fileTransfer.items.add(params[key]);
        field.files = fileTransfer.files;
      } else {
        // 普通参数仍用hidden input
        field = document.createElement('input');
        field.type = 'hidden';
        field.name = key;
        field.value = params[key];
      }
      form.appendChild(field);
    }
  }
  document.body.appendChild(form);
  form.submit();
}

修改后即可恢复原调用方式，表单提交后页面会自动刷新，后端也能通过request.files['thisFile']获取文件：

function upload(bucket) {
  const selectedFile = document.getElementById('bucketUpload').files[0];
  const parameters = {
    bucket: bucket,
    thisFile: selectedFile,
  };
  post("/uploadToBucket", parameters);
}

方案二：用fetch上传后手动更新UI（避免页面刷新） #

如果不想刷新页面，可在fetch请求成功后，手动完成清空文件选择器和更新文件列表两个操作，替代页面刷新：

function upload(bucket) {
  const selectedFile = document.getElementById('bucketUpload').files[0];
  let formData = new FormData();
     
  formData.append("thisFile", selectedFile);
  formData.append("bucket", bucket);

  fetch('/uploadToBucket', {
    method: "POST",
    body: formData
  })
  .then(response => {
    if (!response.ok) throw new Error('上传失败');
    return response.json();
  })
  .then(() => {
    // 1. 清空文件选择器
    document.getElementById('bucketUpload').value = '';
    
    // 2. 重新拉取存储桶文件列表并更新页面DOM
    return fetch(`/getBucketFiles?bucket=${bucket}`); // 假设后端提供该查询接口
  })
  .then(response => response.json())
  .then(files => {
    // 根据你的页面结构更新文件列表
    const fileListContainer = document.getElementById('fileList');
    fileListContainer.innerHTML = '';
    files.forEach(file => {
      const fileItem = document.createElement('div');
      fileItem.textContent = file.name;
      fileListContainer.appendChild(fileItem);
    });
  })
  .catch(err => console.error('操作失败:', err));
}

此方案避免了页面刷新带来的状态丢失问题，同时能即时更新文件列表并清除已选文件。

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