无法使用react hook form获取文件上传的formData值

如何解决无法使用react hook form获取文件上传的formData值

我正在构建一个包含一些文本输入和文件上传选项的表单。我正在使用 react-hook-form 库来实现这一点。这是图书馆 https://react-hook-form.com/ 的链接。 我为此开发了一个小代码和框，但它仅包含文件上传选项。我无法在 formdata 中获取文件值。如果有人能告诉我这里出了什么问题，那将对我有真正的帮助。任何帮助将不胜感激，并提前致谢。这是代码沙箱链接。 Codesandbox

解决方法

首先使用 React-Hook-Form 您可以验证您的输入甚至文件的输入。 为此，您可以使用 Yup。 其次，为了获得价值，您只需初始化一个 new FormData，如下所示：

import React from "react";
import { useForm } from "react-hook-form";
import ReactDOM from "react-dom";

import "./styles.css";

const defaultValues = {
  test: [
    {
      name: "useFieldArray1",nestedArray: [{ field1: "field1",field2: "field2" }]
    },{
      name: "useFieldArray2",field2: "field2" }]
    }
  ]
};

function App() {
  const {
    control,register,handleSubmit,getValues,errors,reset,setValue
  } = useForm({
    defaultValues
  });

  const onSubmit = (data) => {
    // data in my project consists of other input data as well
    const uploads = new FormData();
    uploads.append("source",data.source[0]);
    console.log(uploads)
    // you can now make an API call if you want
    // enter code here
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>Array of Array Fields</h1>

      <input type="file" ref={register} name="source" />
      <button type="button" onClick={() => reset(defaultValues)}>
        Reset
      </button>

      <input type="submit" />
    </form>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />,rootElement);

你可以使用这个 uploads 做任何你想做的事情，比如 API 调用