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

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

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

2025-10-25

浏览次数：次

返回列表

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 是更合适的选择。

Ztoy网络商铺多用户版

在原版的基础上做了一下修正：增加1st在线支付功能与论坛用户数据结合，vip也可与论坛相关，增加互动性vip会员的全面修正评论没有提交正文的问题特价商品的调用连接问题删掉了2个木马文件去掉了一个后门补了SQL注入补了一个过滤漏洞浮动价不能删除的问题不能够搜索问题收藏时放入购物车时出错点放入购物车弹出2个窗口修正定单不能删除问题VIP出错问题主题添加问题商家注册页导航连接问题添加了导航FLASH源文

0 查看详情 Ztoy网络商铺多用户版

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

导致后端接收空文件的一个常见原因是前端没有正确地将文件数据添加到 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 函数。