Solid.js 文件上传：解决后端接收空文件的问题-js教程-PHP中文网

Solid.js 文件上传：解决后端接收空文件的问题

DDD

发布： 2025-10-25 14:17:01

原创

868人浏览过

solid.js 文件上传：解决后端接收空文件的问题

本文档旨在帮助开发者解决在使用 Solid.js 构建文件上传功能时，后端接收到空文件的问题。我们将探讨使用 `createSignal` 和 `createStore` 的区别，并提供一个完整可用的 Solid.js 前端文件上传示例，确保文件能够成功传输到后端。

理解 Solid.js 中的状态管理：createSignal vs createStore

在 Solid.js 中，createSignal 和 createStore 都是用于管理状态的工具，但它们在处理复杂数据结构（如数组）时有所不同。

createSignal 适用于管理简单值，例如字符串、数字或布尔值。当需要管理数组时，直接使用 createSignal 可能会导致更新问题，因为 Solid.js 的响应式系统可能无法正确追踪数组内部的变化。

createStore 专门用于管理复杂的数据结构，包括对象和数组。它允许你直接修改 store 中的数据，而 Solid.js 的响应式系统能够追踪这些变化，并自动更新相关的 UI 组件。

因此，在处理文件上传时，由于我们需要存储和管理一个文件对象的数组，所以 createStore 是更合适的选择。

小文AI论文

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

查看详情

解决后端接收空文件的问题

导致后端接收空文件的一个常见原因是前端没有正确地将文件数据添加到 FormData 对象中。以下是一个使用 Solid.js 和 createStore 实现文件上传功能的示例：

import { createStore } from "solid-js/store";
import { createEffect } from 'solid-js';

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>
      <input type="file" multiple onChange={handleFileChange} />
      <button onClick={uploadFiles}>Upload</button>
    </div>
  );
}

export default App;

登录后复制

代码解释：

createStore([]): 创建一个名为 files 的 store，用于存储选中的文件。初始值是一个空数组。
handleFileChange(event): 当文件输入框的值发生变化时触发。它将选中的文件列表转换为数组，并使用 setFiles 更新 store。
uploadFiles(): 该函数负责将文件上传到服务器。
- 创建一个 FormData 对象。
- 遍历 files store 中的每个文件，并使用 formData.append('file', file) 将文件添加到 FormData 对象中。 注意： append 方法的第一个参数 'file' 是后端接收文件时使用的字段名，需要与后端代码保持一致。
- 使用 fetch API 发送 POST 请求到服务器。body 设置为 formData。
- 处理服务器的响应，并在控制台中打印 JSON 响应。
- 捕获并记录上传过程中发生的任何错误。
JSX: 包含一个文件输入框和一个上传按钮。
- input type="file" multiple onChange={handleFileChange}"：文件输入框，multiple 属性允许用户选择多个文件。onChange 事件绑定到 handleFileChange 函数。
- button onClick={uploadFiles}：上传按钮，onClick 事件绑定到 uploadFiles 函数。