Solid.js 文件上传指南：解决文件为空的问题-js教程-PHP中文网

Solid.js 文件上传指南：解决文件为空的问题

DDD

发布： 2025-10-25 14:58:23

原创

393人浏览过

solid.js 文件上传指南：解决文件为空的问题

本文旨在帮助开发者解决在使用 Solid.js 实现多文件上传时遇到的文件内容为空的问题。我们将探讨 `createSignal` 和 `createStore` 在处理文件数组时的差异，并提供一个完整的、可运行的 Solid.js 文件上传示例，确保后端能够正确接收和处理上传的文件。

理解 createSignal 和 createStore 的差异

在使用 Solid.js 进行文件上传时，一个常见的错误是使用 createSignal 来存储文件数组。createSignal 主要用于存储简单的值，虽然可以存储数组，但在处理复杂的数据结构，如文件对象数组时，createStore 通常是更好的选择。createStore 专门用于管理复杂的状态，它能够更高效地追踪数组内部的变化，确保组件在状态更新时正确地重新渲染。

解决文件上传为空的问题

以下是一个使用 createStore 实现多文件上传的 Solid.js 组件示例：

import { createStore } from "solid-js/store";
import { createStyles } from 'solid-style-system';

const styles = createStyles({
  App: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '20px',
    backgroundColor: '#f0f0f0',
  },
  item: {
    marginBottom: '10px',
  },
});

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

  function handleFileChange(event) {
    const selectedFiles = Array.from(event.target.files);
    setFiles(() => selectedFiles);
  }

  async function uploadFiles() {
    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,
      })
      .then(response => response.json())
      .then(data => {
        console.log('response json:' , data); // Log the JSON response
      });
    } 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;

登录后复制

代码解释：

小文AI论文

轻松解决论文写作难题，AI论文助您一键完成，仅需一杯咖啡时间，即可轻松问鼎学术高峰！

查看详情

createStore 的使用： 使用 createStore([]) 创建一个存储文件数组的状态。
handleFileChange 函数： 当文件输入框的值发生变化时，该函数会被调用。它将选中的文件转换为数组，并使用 setFiles 更新状态。
uploadFiles 函数： 该函数负责将文件上传到服务器。它创建一个 FormData 对象，并将文件逐个添加到 FormData 中。然后，使用 fetch API 发送 POST 请求，将 FormData 作为请求体发送到服务器。
错误处理： try...catch 块用于处理文件上传过程中可能出现的错误。
样式增强： 使用 solid-style-system 创建了简单的样式，使界面更具可读性。