英文:
Unable to combine input and additional data to formdata in Next.js using server actions
问题
我正在使用Next.js构建一个用于显示我的城市FIFA排名的Web应用程序。我遇到了一个问题，我不知道如何将附加数据包含到FormData中，这些数据不是简单输入的一部分。更准确地说，我正在使用uploadthing，我上传图像，然后在服务器上接收到该图像的链接。
'use client'
import { Input } from "@/components/ui/input"
import { CldUploadButton } from 'next-cloudinary';
import addUser from "@/components/actions/addUser";
import "@uploadthing/react/styles.css";
import { UploadButton } from "@/utils/uploadthing";
export default function Page(){
return(
<form className="flex flex-col items-center" action={addUser}>
<div className='flex flex-col justify-center align-middle gap-4'>
<Input className="w-[200px]" type="text" name="name" placeholder="name" />
<Input className="w-[200px]" type="text" name="login" placeholder="login" required />
<Input className="w-[200px]" type="text" name="elo" defaultValue={1000} />
</div>
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
return res!==undefined ? res[0].fileUrl : null;
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
/>
<button className="" type="submit">Submit </button>
</form>
)
}
我应该怎么做，以便我可以将urllink包含到FormData中？
英文:
I'm working with Next.js and building a web application for FIFA ranking in my city. I have faced the problem, I don't know how to include additional data into FormData that is not a part of simple input. To be more precise, I'm using uploadthing, where I upload image and then receive link of this image on the server.
'use client'
import { Input } from "@/components/ui/input"
import { CldUploadButton } from 'next-cloudinary';
import addUser from "@/components/actions/addUser";
import "@uploadthing/react/styles.css";
import { UploadButton } from "@/utils/uploadthing";
export default function Page(){
return(
<form className="flex flex-col items-center" action={addUser}>
<div className='flex flex-col justify-center align-middle gap-4'>
<Input className="w-[200px]" type="text" name="name" placeholder="name" />
<Input className="w-[200px]" type="text" name="login" placeholder="login" required />
<Input className="w-[200px]" type="text" name="elo" defaultValue={1000} />
</div>
<UploadButton
endpoint="imageUploader"
onClientUploadComplete={(res) => {
// Do something with the response
return res!==undefined ? res[0].fileUrl : null;
}}
onUploadError={(error: Error) => {
// Do something with the error.
alert(`ERROR! ${error.message}`);
}}
/>
<button className="" type="submit">Submit </button>
</form>
)
}
What should I do, so I can include urllink into formdata?
答案1
得分: 1
使用 UploadThing API 中的 uploadFiles 而不是提供的 UploadButton，我成功解决了相同的问题。这样，您可以在表单中使用普通的 <input type="file" />，并将所选文件添加到服务器操作中的 formData 中。
显然，这意味着如果您希望它执行与 UploadButton 相同的操作，您必须在表单中实现和样式化自己的按钮。
英文:
Had the same question, which I managed to solve by using uploadFiles from the UploadThing API rather than the provided UploadButton. That way, you're using the normal <input type="file" /> in your form and the chosen file(s) get added to the formData in your server action.
Obviously, this means you have to implement and style your own button in the form if you want it to do the same thing as the UploadButton.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论