Я пытаюсь реализовать форму, которая может публиковать информацию на сервере, и если пользователь хочет, он / она может загрузить изображение с ним. Однако каждый раз, когда я использую fetch для отправки их на сервер, на сервер поступают только текстовые данные, тогда как файл поставляется со значением пустого объекта = {}.
Вот что я сейчас делаю:
<form className="contact-form flex container" onSubmit={(e) => this.submitValue(e)} encType="multipart/form-data">
<div className="contact-form__block flex column">
<label htmlFor="name"className="contact-form__label">Texto: </label>
<textarea name="text" id="name" className="contact-form__textarea" placeholder="Digite sobre o que quer falar" onChange={(e) => this.handleInputs(e)} value={text}/>
</div>
<div className="contact-form__send-buttons flex">
<input type="file" name="sampleFile" onChange={this.insertFile}/>
<button className="contact-form__submit"> Enviar </button>
</div>
</form>
Затем у меня есть функция insertFile , которая вставляет информацию о файле в состояние, а затем submitFile функция, которая отправляет запрос на публикацию
insertFile(e){
e.preventDefault();
this.setState({
file: e.target.files[0]
})
}
submitValue(e){
e.preventDefault();
fetch('http://localhost:3000/register', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(this.state)
})
}
на сервер, я реализовал мультер следующим образом:
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads');
},
filename: function (req, file, cb){
cb(null, file.originalname);
}
});
let upload = multer({storage: storage});
И теперь я пытаюсь получить значение в req.file,но ничего не пропускается
router.post('/register', upload.single('sampleFile'), (req, res) => {
const { body: {name, subject, text} } = req;
console.log('RECEIVED: ', req.body) // RECEIVED: { text: 'test1234', file: {} }
})
Кто-нибудь знает, что я делаю неправильно?