Как загрузить файл с помощью Fetch и Multer и опубликовать данные формы в одном запросе? - PullRequest
0 голосов
/ 26 октября 2019

Я пытаюсь реализовать форму, которая может публиковать информацию на сервере, и если пользователь хочет, он / она может загрузить изображение с ним. Однако каждый раз, когда я использую 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: {} }
})

Кто-нибудь знает, что я делаю неправильно?

1 Ответ

0 голосов
/ 27 октября 2019

При отправке запроса не указывайте атрибут headers и не строковый объект файла

 submitValue(e){
        e.preventDefault();
        fetch('http://localhost:3000/register', {
        method: 'POST',
        body: this.state.file
        })
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...