Solid.js多文件上传后端接收为空，求原因及解决方法

我尝试用Solid.js实现多文件上传功能，代码如下：

import { createSignal } from 'solid-js';

function App() {

  const [files, setFiles] = createSignal([]);

  function handleFileChange(event) {
    const selectedFiles = Array.from(event.target.files);
    setFiles(() => selectedFiles);
    selectedFiles.forEach(file => {
      console.log('Selected file:', file.name);
      console.log('File size:', file.size);
    });
  }

  async function uploadFiles() {
    const formData = new FormData();
    for (const file of files()) {
      formData.append('file', file);
    } 

    // Send the file to the server using fetch or your preferred method
      try {
        const response = await fetch('http://127.0.0.1:8090/upload', {
          method: 'POST',
          body: formData,
        });
        console.log('File uploaded successfully');
      } catch (error) {
       console.error('Error uploading file:', error);
      }
  }

 
  return (
    <div class={styles.App}>
        <div class={styles.item}>
      
          <input type="file" multiple onChange={handleFileChange} />
          <button onclick={uploadFiles}>Upload</button>
         </div>
    </div>
  );
}

export default App;

控制台能正常打印选中的文件信息：

Selected file: Track01.mp3
App.jsx:16 File size: 1650939
App.jsx:15 Selected file: Track02.mp3
App.jsx:16 File size: 1919269
App.jsx:15 Selected file: Track03.mp3
App.jsx:16 File size: 1338305
App.jsx:37 File uploaded successfully

但后端接收到的文件是空数组：

files: []

试过改用createStore存储文件列表，也把uploadFiles改成同步函数，问题依旧。作为Solid.js新手，想知道问题出在哪以及怎么解决？

核心问题 #

你的代码存在两个关键错误：

• 按钮事件绑定错误：Solid.js中事件绑定需使用驼峰式的onClick，而非小写的onclick。小写onclick是原生DOM属性，无法正确触发组件内的uploadFiles函数，导致上传逻辑未按预期执行。
• 对createSignal的误解：createSignal完全支持存储数组，你看到的相关资料有误。它可以存储任何类型的值，包括数组、对象等复杂类型。

修复步骤 #

1. 修正事件绑定：将按钮代码从<button onclick={uploadFiles}>Upload</button>改为<button onClick={uploadFiles}>Upload</button>。
2. 验证文件列表：在uploadFiles函数开头添加console.log('Files to upload:', files())，确认上传时确实获取到了选中的文件。
3. 后端字段检查：确保后端接收文件的字段名为file（对应代码中formData.append('file', file)），若后端期望其他字段名，需同步修改append的第一个参数。

修复后的完整代码 #

import { createSignal } from 'solid-js';

function App() {
  const [files, setFiles] = createSignal([]);

  function handleFileChange(event) {
    const selectedFiles = Array.from(event.target.files);
    setFiles(selectedFiles); // 简化写法，无需箭头函数
    selectedFiles.forEach(file => {
      console.log('Selected file:', file.name);
      console.log('File size:', file.size);
    });
  }

  async function uploadFiles() {
    console.log('Files to upload:', files()); // 验证文件列表
    const formData = new FormData();
    for (const file of files()) {
      formData.append('file', file);
    } 

    try {
      const response = await fetch('http://127.0.0.1:8090/upload', {
        method: 'POST',
        body: formData,
      });
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`); // 检查响应状态
      }
      console.log('File uploaded successfully');
    } catch (error) {
      console.error('Error uploading file:', error);
    }
  }

  return (
    <div class={styles.App}>
      <div class={styles.item}>
        <input type="file" multiple onChange={handleFileChange} />
        <button onClick={uploadFiles}>Upload</button> {/* 修正事件绑定 */}
      </div>
    </div>
  );
}

export default App;

额外说明 #

• Solid.js事件绑定遵循驼峰命名规则（如onClick、onChange），这是与原生DOM属性的核心区别，新手易混淆。
• 更新createSignal的数组值时，直接传入新数组即可，无需箭头函数（除非需要基于旧值计算新值）。
• 上传时建议检查response.ok，避免后端返回错误状态码但前端仍提示成功的情况。

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