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

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

心靈之曲

发布： 2025-10-25 11:48:01

原创

512人浏览过

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

本文旨在解决 Solid.js 中使用 `createSignal` 或 `createStore` 进行多文件上传时，后端接收到空文件的问题。我们将详细介绍如何正确地使用 `createStore` 管理文件状态，并提供一个完整的前端示例，确保文件能够成功上传至后端。

在 Solid.js 中实现文件上传功能，尤其是多文件上传，需要特别注意状态管理和数据传递的方式。常见的错误是使用了不适合存储数组的 createSignal，或者在构建 FormData 对象时出现问题。

使用 createStore 管理文件状态

Solid.js 提供了 createSignal 和 createStore 两种状态管理方式。对于需要存储数组（如文件列表）的情况，createStore 是更合适的选择。createSignal 更适合存储基本类型的值，如果需要存储数组，则需要额外的处理。

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

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

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

  // ... 后续代码
}

登录后复制

在这个例子中，files 是一个存储文件列表的状态，setFiles 是更新这个状态的函数。当用户选择文件时，handleFileChange 函数会将选中的文件列表更新到 files 状态中。

注意： setFiles 的使用方式是直接传入 selectedFiles 数组，而不是使用回调函数。createStore 允许直接设置数组，而 createSignal 通常需要使用回调函数来确保更新的正确性。

构建 FormData 对象并上传文件

在获取到文件列表后，下一步是将文件数据构建成 FormData 对象，并通过 fetch API 发送到后端。

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);
  }
}

登录后复制

这段代码遍历 files 数组，将每个文件添加到 formData 对象中。formData.append('file', file) 的作用是将文件以 file 为键名添加到 FormData 中。后端需要根据这个键名来获取上传的文件。

小文AI论文

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

查看详情

注意： fetch API 的 body 属性需要设置为 formData 对象，这样才能正确地将文件数据发送到后端。另外，建议在 fetch 之后，通过 .then(response => response.json()) 将响应转换为 JSON 格式，方便后续处理。

完整示例代码

下面是一个完整的 Solid.js 文件上传示例代码：

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

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;

登录后复制

这段代码包含以下几个部分：