Netlify表单仪表板不显示输入类型文件

Question

我正在用盖茨比建立一个简单的网站。该网站的表单包含一些输入字段，分别是文本和一个输入类型文件。

我正在使用样式组件。

  const initialState = {
    firstName: "",
    lastName: "",
    email: "",
    phoneNumber: "",
    message: "",
    cv: null,
    linkedinUrl: "",
    isSent: false,
    validation: validator.valid(),
  }
  const [formData, setFormData] = useState({
    ...initialState,
  })

  const [isFormSubmitted, setIsFormSubmitted] = useState(false)

  const handleInputChange = event => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    })
  }

  const handleFileLoad = e => {
    setFormData({
      ...formData,
      cv: e.target.files[0],
    })
  }

  const handleSubmit = event => {
    event.preventDefault()
    // const { firstName, lastName, email, phoneNumber, siteWeb, message } = formData

    const validation = validator.validate(formData)
    setFormData({
      ...formData,
      validation,
    })
    setIsFormSubmitted(true)

    if (validation.isValid) {
      const encode = data => {
        console.log(data)
        return Object.keys(data)
          .map(
            key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
          )
          .join("&")
      }
      fetch(event.target.action, {
        method: "POST",
        headers: { "Content-Type": "multipart/form-data" },
        body: encode({ "form-name": title, job, ...formData }),
      })
        .then(() => setFormData({ ...initialState, isSent: true }))
        .catch(error => alert(error))
    }
  }

  const {
    firstName,
    lastName,
    email,
    phoneNumber,
    linkedinUrl,
    message,
    validation,
  } = formData
  // if the form has been submitted at least once, then check validity every time we render
  // otherwise just use what's in state
  const copyData = { ...formData }
  const formValidation =
    isFormSubmitted && !formData.isSent
      ? validator.validate(copyData)
      : validation

  return (
    <FormStyled
      onSubmit={handleSubmit}
      data-netlify="true"
      name={title}
      method="POST"
      netlify-honeypot="bot-field"
    >
      <Spacer flex="1 1 50%">
        <Input
          type="text"
          placeholder="Prénom"
          value={firstName}
          handleChange={e => handleInputChange(e)}
          name="firstName"
          required
          fullWidth
          id="firstName"
        />
        <input type="hidden" name="form-name" value={title} />
        <input
          type="text"
          value={job}
          name="job"
          id="job"
          style={{ display: "none" }}
        />
        <ValidationMessage isInvalid={formValidation.firstName.isInvalid}>
          {formValidation.firstName.message}
        </ValidationMessage>
      </Spacer>
      <Spacer flex="1 1 50%">
        <Input
          type="text"
          placeholder="Nom"
          value={lastName}
          handleChange={e => handleInputChange(e)}
          name="lastName"
          required
          fullWidth
          id="lastName"
        />
        <ValidationMessage isInvalid={formValidation.lastName.isInvalid}>
          {formValidation.lastName.message}
        </ValidationMessage>
      </Spacer>
      <Spacer flex="1 1 50%">
        <Input
          type="tel"
          placeholder="Téléphone"
          value={phoneNumber}
          handleChange={e => handleInputChange(e)}
          name="phoneNumber"
          fullWidth
          id="phoneNumber"
        />
        <ValidationMessage isInvalid={formValidation.phoneNumber.isInvalid}>
          {formValidation.phoneNumber.message}
        </ValidationMessage>
      </Spacer>
      <Spacer flex="1 1 50%">
        <Input
          type="email"
          placeholder="E-mail"
          value={email}
          handleChange={e => handleInputChange(e)}
          name="email"
          required
          fullWidth
          id="email"
        />
        <ValidationMessage isInvalid={formValidation.email.isInvalid}>
          {formValidation.email.message}
        </ValidationMessage>
      </Spacer>
      <Spacer flex="1 1 auto">
        <Button title="Télécharger votre CV" colors="primary">
          <InputFile type="file" id="cv" onChange={handleFileLoad} name="cv" />
        </Button>
      </Spacer>
      <Spacer flex="1 1 auto">
        <Text>et / ou</Text>
      </Spacer>
      <Spacer className="linkedin-url">
        <Input
          type="url"
          placeholder="Lien de votre profil linkedin"
          value={linkedinUrl}
          handleChange={e => handleInputChange(e)}
          name="linkedinUrl"
          required
          fullWidth
          id="linkedinUrl"
          iconLeft={
            <LogoLinkedin>
              <img src={Lkd} alt="lien Linkedin" />
            </LogoLinkedin>
          }
        ></Input>
      </Spacer>
      <Spacer>
        <Textarea
          type="text"
          placeholder="Votre message..."
          value={message}
          handleChange={e => handleInputChange(e)}
          name="message"
          required
          fullWidth
          id="message"
        />
        <ValidationMessage isInvalid={formValidation.message.isInvalid}>
          {formValidation.message.message}
        </ValidationMessage>
      </Spacer>
      <SuccessMessage isSent={formData.isSent}>
        Merci, votre message a bien été envoyé !
      </SuccessMessage>
      <Spacer textAlign="center">
        <Button title="Envoyer" type="submit" colors="primary" />
      </Spacer>
    </FormStyled>
  )
}

下面是我发送文件时的请求有效负载：

form-name=postuler&job=Tous&firstName=foo&lastName=bar&email=foo.bar%40gmail.com&phoneNumber=0102030405&message=foo%20bar%20baz&cv=%5Bobject%20File%5D&linkedinUrl=https%3A%2F%2Fwww.foobar.fr&isSent=false&validation=%5Bobject%20Object%5D&ignore_whitespace=false&allow_display_name=false&require_display_name=false&allow_utf8_local_part=true&require_tld=true

当我发送表单时，数据将正确显示在Netlify表单仪表板中，但输入类型文件的内容仍为空。我希望输入类型文件的内容显示在Netlify仪表板中（关于该文档，我认为它应该是访问该文件的链接）。

根据我的了解，仔细查看请求有效负载后，我正在发送cv=%5Bobject%20File，所以我猜是个问题，因为Netlify无法检索到cv输入的真实内容。