Question

我正在与MERN一起玩，并且正在开发图像上传者网站。我试图上传带有来自React输入的文本的图像。我可以成功上传。但是，该文本为“未定义”。这是我的尝试。

//React//
const Landing = () => {
  const [imageState, setImageState] = useState({
    text: "",
    image: null,
    redirect: false
  });
  const onChange = e => {
   setImageState({
      [e.target.name]: e.target.value
    });
  };

 const upload = e => {
      formData.append("myimage", image);
      formData.append("text", text);
      await axios.post("/upload", formData);

      <form
        onSubmit={e => upload(e)}/>
        <input
          type="text"
          name="text"
          value={text}
          onChange={e => onChange(e)}
        />
        <input type="file" name="myimage" onChange={e => imageChange(e)} />
        {/* {renderRedirect()} */}
        <input type="submit" value="Upload Photo" />

//Node//
router.post("/upload", (req, res) => {
  upload(req, res, err => {
    if (err) {
      console.error(err.message);
    }

    let data = new ImageModel({
      text: req.body.text,
      image: req.file.originalname
    });
    data.save().then(result => {
      res.send(result);
    });
  });

Answer 1

在您的setImageState方法中，我不确定在设置字段参数时e.target.name是否会起作用。请尝试使用e.target.id。示例：

setImageState({
  [e.target.id]: e.target.value
});

MongoDB中的文本为“未定义”，而是文件数据已成功上传

1 个答案: