无法使用反应挂钩表单获取文件上传的formData值答案

【问题标题】：Unable to get the formData values of file upload using react hook form无法使用反应挂钩表单获取文件上传的formData值
【发布时间】：2020-12-21 11:05:30
【问题描述】：

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

【问题讨论】：

标签： reactjs form-data react-hook-form

【解决方案1】：

首先使用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",
      nestedArray: [{ field1: "field1", 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 调用

【讨论】：