Question

即使它大部分来自netlify网站，我似乎也无法弄清为什么文件上传不起作用。我得到的是所有字段，但是文件上传恢复为空白，并且在控制台中没有错误。看过视频和在线说明，看不出有什么区别

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Contact</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>

    <!-- A little help for the Netlify post-processing bots -->
    <form name="contact" netlify   hidden>
      <input type="text" name="name" />
      <input type="text" name="CompanyName" />
      <input type="text" name="Address" />
      <input type="text" name="PrimaryContact" />
      <input type="text" name="SecondaryContact" />
      <input type="email" name="email" />
      <textarea name="message"></textarea>
      <input  type="file" name="myFile"/>
    </form>

    <div id="root"></div>

    <script type="text/babel">

      const encode = (data) => {
        return Object.keys(data)
            .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
            .join("&");
      }

      class ContactForm extends React.Component {
        constructor(props) {
          super(props);
          this.state = { name: "",CompanyName:"",Address:"",PrimaryContact:"", SecondaryContact:"", email: "", message: "" , myFile:""};
        }

        /* Here’s the juicy bit for posting the form submission */

        handleSubmit = e => {
          fetch("/", {
            method: "POST",
            headers: { "Content-Type": "application/x-www-form-urlencoded" },
            body: encode({ "form-name": "contact", ...this.state })
          })
            .then(() => alert("Success!"))
            .catch(error => alert(error));

          e.preventDefault();
        };

        handleChange = e => this.setState({ [e.target.name]: e.target.value });

        render() {
          const { name,CompanyName, Address, PrimaryContact,SecondaryContact,email, message,myFile } = this.state;
          return (
            <form onSubmit={this.handleSubmit} data-netlify-recaptcha="true" data-netlify="true">
              <p>
                <label>
                  Your Name: <input type="text" name="name" value={name} onChange={this.handleChange} required/>
                </label>
              </p>
              <p>
                <label>
                  Company Name: <input type="text" name="CompanyName" value={CompanyName} onChange={this.handleChange} />
                </label>
              </p>
              <p>
                <label>
                  Address: <input type="text" name="Address" value={Address} onChange={this.handleChange} />
                </label>
              </p>
              <p>
                <label>
                  Primary Contact: <input type="text" name="PrimaryContact" value={PrimaryContact} onChange={this.handleChange} />
                </label>
              </p>
              <p>
                <label>
                  Secondary Contact: <input type="text" name="SecondaryContact" value={SecondaryContact} onChange={this.handleChange} />
                </label>
              </p>
              <p>
                <label>
                  Your Email: <input type="email" name="email" value={email} onChange={this.handleChange} />
                </label>
              </p>
              <p>
                <label>
                  Ticket Discription: <textarea name="message" value={message} onChange={this.handleChange} />
                </label>
              </p>
              <p>
                    <input  type="file" name="myFile"  placeholder="Upload File" />
              </p>
              <p>
                <button type="submit">Send</button>
              </p>
            </form>
          );
        }
      }

      ReactDOM.render(<ContactForm />, document.getElementById("root"));

    </script>
  </body>
</html>

Answer 1

我遇到了类似的问题，并且能够使用Netlify社区的以下清单解决此问题：

6。在大多数情况下，请确保使用Content-Type为application / x-www-form-urlencoded的POST表单请求（而非GET）。但是，并且仅当您提交带有文件上传的表单时，内容类型才需要改为multipart / form-data 。

来自：[Common Issue] Form problems, form debugging, 404 when submitting

移动到其他Content-Type可以为我解决类似的问题。再说一次，我没有使用精美的Javascript / Ajax表单提交功能，因此只需要在表单标签中添加enctype="multipart/form-data"属性即可。对于您而言，这需要重新设计encode函数。

Answer 2

我也有类似的问题。

从 fetch（）函数中删除了 headers 选项。

例如：

fetch("/", {
  method: "POST",
  // headers: { "Content-Type": "application/x-www-form-urlencoded" },
  body: encode({ "form-name": "contact", ...this.state })
})

netlify表单提交未在后端显示文件，所有其他字段均显示，但文件未显示

2 个答案: