1

我正在尝试使用 formik 表单上传图像，如果不是，我如何将 formik 表单值转换为 formData？

4

1 回答 1

2

Formik 保留状态数据，这些数据通常在onSubmit从您的<form>. 您可以将其添加到 FormData 对象，将其作为 json 发送等。

为了澄清您的问题，该函数FormData有一个大写 F（如Objectin new Object()），但一个常见的约定是调用其值分配给的变量formData（小写 f），例如：

let formData = new FormData();

回到福米克 -

Formik 非常棒，因为它处理了表单处理的许多细节，而无需您自己完成所有样板文件，例如从输入字段值存储状态，内置处理程序onSubmit, onBlur,onChange等。

但是，它不会将输入字段中的值附加到任何类型的对象上。

在以下示例中，<Formik>组件将这些值的 props 传递给<Form>组件，该组件旨在自动使用它们。

我的猜测是大多数人使用 中的application/json功能fetch，因为它不需要这些额外的步骤，但是如果你想使用一个FormData对象，你必须显式地调用它。

以下是它在上下文中的工作方式：

// Path: `/projectRoot/src/BriefFormikForm.jsx`
import React from 'react';
import { Form, Formik } from "formik";
import * as Yup from "yup";
import { formPost } from "./formPost";

const endpoint = "https://oursamedomain.net/phpmailer.php";

const nameRegEx = "^[aA-zZs-]+$";

const initialValues = {
  name: "",
  email: "",
  message: "",
};

const validationSchema = Yup.object({
  name: Yup.string()
    .matches(nameRegEx, `Must be only letters or hyphen`)
    .required(`Name is required`),
  email: Yup.string()
    .email(`That's not an email address!`)
    .required(`Email address is required`),
  message: Yup.string()
    .min(50, `Please include more details...`)
    .required(`Message is required`),
});

export default () => {
  return (
    <div>
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}

        /* onSubmit is where you'll retrieve the
           state (values) from the input fields: */
        onSubmit={(values, actions) => {

          /* Then create a new FormData obj */
          let formData = new FormData();

          /* FormData requires name: id */
          formData.append("website", "question");
          
          /* append input field values to formData */
          for (let value in values) {
            formData.append(value, values[value]);
          }

          /* Can't console.log(formData), must
             use formData.entries() - example:  */
          for (let property of formData.entries()) {
            console.log(property[0], property[1]);
          }

          /* Now POST your formData: */
          formPost(endpoint, formData);
        }}
      >

        /* here's your html-like form */
        {(props) => (
          <Form onSubmit={props.handleSubmit}>
            <input
              htmlFor="name"
              id="name"
              name="name"
              placeholder="Name goes here"
              type="text"

            /* built-in props from <Formik /> */
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              value={props.values.name}
            />
            <input
              htmlFor="email"
              id="email"
              name="email"
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              placeholder="Email address goes here"
              type="text"
              value={props.values.email}
            />
            <textarea
              htmlFor="message"
              id="message"
              name="message"
              onBlur={props.handleBlur}
              onChange={props.handleChange}
              placeholder="Question goes here"
              rows="8"
              type="text"
              value={props.values.message}
            />
          </Form>
        )}
      </Formik>
    </div>
  );
};

这是一个fetch将我们的 formData POST 到.PHP同一服务器上的文件的函数。此示例记录response对象中的所有值 - 如果调试信息对您来说太多，请摆脱for in循环：

// Path: `/projectRoot/src/formPost.js`
export const formPost = (endpoint, formData) => {
  fetch(endpoint, {
    method: 'POST',
    mode: 'same-origin',
    body: formData,
  })
    .then(response => {

      /* tell me everything you know! */
      for (let key in response) {
        console.log('response: ', key, response[key]);
      }

      const result = response.text();
      if (!response.ok) {
        throw new Error('HTTP error: ', response.status);
      }
      return result;
    })
    .then(result => {
      console.log('fetch result: ', result);
    })
    .catch(error => {
      console.log('fetch error: ', error.message);
    });
};

其他资源：

官方网站上的基本示例教程：

使用 withFormik HOC 的异步 onSubmit 示例

于 2021-07-14T04:45:45.507 回答