如何将uploadthing与react-hook-form集成并传递上传文件URL至表单？

方法1：用setValue手动同步URL #

当文件上传完成拿到URL后，直接调用react-hook-form的setValue方法，把URL赋值给表单里对应的字段即可。

示例代码：

import { useForm } from "react-hook-form";
import { useUploadThing } from "@uploadthing/react";

function FileUploadForm() {
  const { register, handleSubmit, setValue } = useForm({
    defaultValues: {
      title: "",
      description: "",
      fileUrl: "" // 专门存文件URL的表单字段
    }
  });
  const { startUpload } = useUploadThing("your-upload-key");

  // 处理文件上传
  const handleFileUpload = async (files) => {
    const uploadResult = await startUpload(files);
    // 确认上传成功且能拿到URL
    if (uploadResult && uploadResult[0]?.url) {
      setValue("fileUrl", uploadResult[0].url);
    }
  };

  const onSubmit = (data) => {
    // 这里的data包含title、description、fileUrl，直接用来发邮件
    console.log("提交的表单数据:", data);
    // 发送邮件的逻辑...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("title")} placeholder="标题" />
      <textarea {...register("description")} placeholder="描述" />
      <input
        type="file"
        onChange={(e) => handleFileUpload(e.target.files)}
      />
      <button type="submit">提交</button>
    </form>
  );
}

方法2：绑定已有状态变量到表单字段 #

如果你已经用useState存了文件URL，可以通过Controller组件把这个状态和表单字段绑定，实现自动同步。

示例代码：

import { useForm, Controller } from "react-hook-form";
import { useState } from "react";
import { useUploadThing } from "@uploadthing/react";

function FileUploadForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      title: "",
      description: "",
      fileUrl: ""
    }
  });
  // 你已有的状态变量
  const [fileUrl, setFileUrl] = useState("");
  const { startUpload } = useUploadThing("your-upload-key");

  const handleFileUpload = async (files) => {
    const uploadResult = await startUpload(files);
    if (uploadResult && uploadResult[0]?.url) {
      setFileUrl(uploadResult[0].url);
    }
  };

  const onSubmit = (data) => {
    console.log("提交的表单数据:", data);
    // 发送邮件的逻辑...
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("title")} placeholder="标题" />
      <textarea {...register("description")} placeholder="描述" />
      <input
        type="file"
        onChange={(e) => handleFileUpload(e.target.files)}
      />
      {/* 用Controller绑定状态和表单字段 */}
      <Controller
        name="fileUrl"
        control={control}
        render={({ field }) => (
          <input
            type="hidden"
            {...field}
            value={fileUrl}
            onChange={() => field.onChange(fileUrl)}
          />
        )}
      />
      <button type="submit">提交</button>
    </form>
  );
}

额外提示 #

• 可以把存储URL的输入框设为type="hidden"，避免用户手动修改。
• 上传失败时要加错误处理，比如不更新表单字段、给用户提示上传失败。
• 确保表单默认值里包含对应URL的字段，避免提交时缺失数据。

内容的提问来源于stack exchange，提问作者Marvin