本文旨在解决 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 中。后端需要根据这个键名来获取上传的文件。
注意： 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;
这段代码包含以下几个部分：
- 状态管理： 使用 createStore 创建 files 状态，用于存储文件列表。
- 文件选择： handleFileChange 函数处理文件选择事件，将选中的文件列表更新到 files 状态中。
- 文件上传： uploadFiles 函数构建 FormData 对象，并通过 fetch API 将文件数据发送到后端。
- ui： 提供一个文件选择输入框和一个上传按钮。
后端注意事项
除了前端代码，后端也需要正确地处理上传的文件。后端需要能够接收 FormData 对象，并根据 file 键名获取上传的文件。具体的后端实现方式取决于你使用的后端框架和语言。
总结：
- 使用 createStore 管理文件列表状态。
- 在 handleFileChange 函数中，直接使用 setFiles(selectedFiles) 更新状态。
- 在 uploadFiles 函数中，构建 FormData 对象，并将每个文件添加到 formData 中，键名为 file。
- 使用 fetch API 将 formData 对象发送到后端。
- 确保后端能够正确地处理上传的文件。
通过遵循这些步骤，你可以成功地在 Solid.js 中实现多文件上传功能，并避免后端接收到空文件的问题。