Javascript 将带有React.js的图片上传到MongoDB中存储

我正在尝试将一个图像文件从客户端上传到MongoDB

我正在使用带有“multer”和“sharp”的express server上载图像。 我正在客户端使用cra应用程序

使用Postman，我可以上传一张图片，并将其存储在MongoDB中。 现在我正试图从客户端上传一张图片，但进展不太顺利。 这就是我使用Hook更改输入的方式

    const INITIAL_STATE = {
      bday: '',
      occupation: '',
      introduction: '',
      picture: undefined,
    };
    const [formData, setFormData] = useState(INITIAL_STATE);
    const { bday, occupation, introduction, picture } = formData;

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

文件上传的输入是这样的

    <div className='form-group'>
      <input
        className='form-input bg-light'
        name='picture'
        type='file'
        value={picture}
        onChange={handleChange}
      />
    </div>

当我使用Postman上传文件时，设置如下，效果很好

我应该怎样上传图像文件？

---

提前感谢。

您的代码不起作用，因为您的handleChange函数不适用于输入[type=file]。在handleChange中，您将状态值设置为event.target.value，但如果您只使用一个文件，则文件输入会将文件存储在event.target.files中。请使用e.target.files[0]。

您好将handleChange更改为：

const handleChange = () => event => {
  console.log(event.target.value)
}

对于警告，这是因为值改变了它的形式

<input
    className='form-input bg-light'
    name='picture'
    type='file'
    value={picture}
    onChange={handleChange}
/>

致：

---

显示警告是因为图片在初始状态下未定义。这不会解决您的问题，但最好将默认值设置为空字符串example@TimGerhard，当我将picture设置为空字符串时，它会在我装入组件时立即给出相同的错误。然而，如果我将其设置为未定义，则在提交文件后会发生错误。。。所以我真的不知道该怎么办。。英雄联盟

<input
    className='form-input bg-light'
    name='picture'
    type='file'
    value={picture}
    onChange={handleChange}
/>

<input
    className='form-input bg-light'
    name='picture'
    type='file'
    value={formData.picture}
    onChange={handleChange}
  />