Node.js 严重错误：错误的内容类型标题，未知的内容类型：文本/普通；字符集=UTF-8

我收到此错误：

错误：错误的内容类型标题，未知的内容类型：text/plain；charset=UTF-8

在尝试使用Windows上载照片时。当I console.log

字段

和

文件

时，我收到两个空对象

我需要改变什么来解决这个问题并上传照片

CreatePost.js

const CreatePost = () => {
  const [values, setValues] = useState({
    title: "",
    body: "",
    photo: "",
    error: "",
    createdPost: "",
    formData: "",
  });
  const { user, token } = isAuthenticated();
  const {
    title,
    body,
    error,
    createdPost,
    formData,
  } = values;

  const handleChange = (name) => (event) => {
    const value = name === "photo" ? event.target.files[0] : event.target.value;
    setValues({ ...values, [name]: value, formData: new FormData() });
  };

  const clickSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: "" });

    createPost(user._id, token, formData).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          title: "",
          body: "",
          photo: "",
          createdPost: data.title,
        });
      }
    });
  };

  const newPostForm = () => (
    <form className="mb-3" onSubmit={clickSubmit}>
      <h4>Post Photo</h4>
      <div className="form-group">
        <label className="btn btn-secondary">
          <input
            onChange={handleChange("photo")}
            type="file"
            name="photo"
            accept="image/*"
          />
        </label>
      </div>

      <div className="form-group">
        <label className="text-muted">Title</label>
        <input
          onChange={handleChange("title")}
          type="text"
          className="form-control"
          value={title}
        />
      </div>

      <div>
        <label>Post body</label>
        <textarea
          onChange={handleChange("body")}
          value={body}
        />
      </div>

      <button>Create Post</button>
    </form>
  );
  const showError = () => (
    <div
      style={{ display: error ? "" : "none" }}>
      {error}
    </div>
  );

  const showSuccess = () => (
    <div
      style={{ display: createdPost ? "" : "none" }}>
      <h2>{`${createdPost} is created!`}</h2>
    </div>
  );

 

  return (
      <div>
        <div>
          {showSuccess()}
          {showError()}
          {newPostForm()}
        </div>
      </div>
  );
};

export default CreatePost;

controllers/posts.js

exports.create = (req, res) => {
  let form = new formidable()
  form.keepExtensions = true
  form.parse(req, (err, fields, files) => {
  if(err) {
    console.log(err)
      return res.status(400).json({
          error: 'Image could not be uploaded'
      })
  }
  
  const { title, body } = fields
  console.log(fields)
  if (!title || !body) {
  return res.status(400).json({
      error: "All fields are required"
  })
  }
  
  let post = new Post(fields)
  
  if(files.photo) {
      if (files.photo.size > 1000000) {
          return res.status(400).json({
              error: "Image should be less than 1MB in size."
          })
      }
      post.photo.data = fs.readFileSync(files.photo.path)
  post.photo.contentType = files.photo.type
  }
  post.save((err, result) => {
  if(err) {
  return res.status(400).json({
      error: errorHandler(err)
  })
  }
  res.json(result)
  })
  })
  }

exports.photo = (req, res, next) => {
  if (req.post.photo.data) {
      res.set('Content-Type', req.post.photo.contentType)
      return res.send(req.post.photo.data)
  }
  next()
}

---

这个问题已经存在很长时间了，我打赌你已经解决了。 如果有人像我一样在这个问题上犯了错误，对我有效的方法是在post controller文件中的新表单上添加.IncomingForm（）方法，如下所示：

let form = new formidable.IncomingForm();

---

你应该发布一个更完整的解决方案解释作为你问题的答案，因为人们并不总是阅读评论。是的，通过查看你的答案很难得到解决方案。

let form = new formidable.IncomingForm();