我正在使用服务器操作并集成一些所见即所得文本编辑器(ReactQuill)使用 Next 14 制作表单。我在服务器端获取表单值,但我不知道如何获取图像的缓冲区值来处理它们。这是代码。
简化形式:
"use client"
export default function NewCompositionForm() {
const [content, setContent] = useState("");
const createCompositionAction = actions.createComposition.bind(null, content);
return (
<form
className="bg-bgCustom pt-4 h-screen rounded-md px-2"
action={createCompositionAction}
>
...
<div className="flex">
<label htmlFor="edition" className="w-1/6 text-xl">
Imágenes
</label>
<input
type="file"
id="images"
name="images"
className="w-5/6 rounded-md px-2 py-1 text-xl"
placeholder="Introduce Editor"
multiple
/>
</div>
<div className="flex flex-col">
<label htmlFor="ext_media" className="text-xl mb-4">
Descripción y/o anotaciones
</label>
<ReactQuill
value={content}
onChange={setContent}
theme="snow"
id="description"
name="description"
className=" bg-slate-50"
modules={quillModules}
formats={quillFormats}
placeholder="Escribe aquí toda la información de la obra."
/>
</div>
<button type="submit">Agregar</button>
</form>
这是服务器端:
"use server"
export async function createComposition(content, formData) {
console.log("Content: ", content)
console.log("FormData: ", formData)
console.log(formData.getAll('images'))
}
这是终端输出:
Content: <p><a href="DUDE" rel="noopener noreferrer" target="_blank"><strong>DUDE</strong></a></p>
FormData: FormData {
[Symbol(state)]: [
{ name: 'type', value: 'camara' },
{ name: 'title', value: 'TITULO!!!' },
{ name: 'rev', value: '' },
{ name: 'length', value: '' },
{ name: 'edition', value: '' },
{ name: 'images', value: [File] },
{ name: 'images', value: [File] }
]
}
File {
size: 13397612,
type: 'image/png',
name: 'Porsche 911 Blue Render.png',
lastModified: 1706694592197
}
``
So how do I handle this multiple files from here?
Thanks
这里是服务器动作的解决方案
"use server";
import fs from "fs";
import path from "path";
import util from 'util'
import { redirect } from "next/navigation";
import { revalidatePath } from "next/cache";
import { db } from "@/lib/db";
//-------- Definitions -------
const writeFileAsync = util.promisify(fs.writeFile)
export async function createComposition(content, formData) {
console.log("Content: ", content);
console.log("FormData: ", formData);
const title = formData.get("title");
//-------- Image file server handler --------
const files = formData.getAll("images");
const filePath = path.join("public", "/compositions", title);
if (!fs.existsSync(path.resolve(filePath))) {
fs.mkdirSync(path.resolve(filePath), { recursive: true });
console.log("Directory created");
}
const writePromises = files.map(async (file) => {
if (file.type === "image/jpeg") {
const bytes = await file.arrayBuffer();
const buffer = Buffer.from(bytes);
await writeFileAsync(`${path.resolve(filePath)}/${file.name}`, buffer);
}
});
await Promise.all(writePromises)
}