Замените HTML действие формы с получением API для веб-сервера - PullRequest
Новая
       38

Замените HTML действие формы с получением API для веб-сервера

0 голосов
/ 07 апреля 2020

Мне удалось сохранить файлы на моем p c с помощью атрибута действия формы HTML, а затем обработать этот запрос на моем Express веб-сервере.
Когда я сейчас пытаюсь заменить его на Eventlistener при отправке Кнопка формы вместо использования атрибута действия для отправки запроса на публикацию Я не могу заставить его работать.

Я получаю сообщение об ошибке 400 неверный запрос.

Выборка 

let form = document.querySelector('#uploadForm')
let inpFile = document.querySelector('#inpFile')
form.addEventListener('submit', async event => {
    event.preventDefault()
    const formData = new FormData()
    formData.append('inpFile', inpFile.files[0])
    fetch('http://myip/upload', {
        method: 'POST',
        headers: {
            'Content-Type' : 'multipart/form-data'
        },
        body: formData
    }).catch(console.error)
})

HTML

<form ref='uploadForm' 
  id='uploadForm' 
  method='post' 
  encType="multipart/form-data">
    <input type="file" name="sampleFile" id="inpFile" />
    <input type='submit' value='Submit' />
</form>

Express Сервер 

const express = require('express')
const app = express();
const path = require('path')
const things = require('./routes/things')
const fileUpload = require('express-fileupload')

app.post('/upload', (req, res) => {
    let sampleFile = req.files.sampleFile
    sampleFile.mv(__dirname + '\\files\\' + sampleFile.name, (err) => {
        if (err)
            return res.status(500).send(err)
        res.send('File uploaded!')
    })
})

1 Ответ

0 голосов
/ 09 апреля 2020

В соответствии с вашим html и кодом извлечения ваш код express должен выглядеть следующим образом: 

const express = require('express')
const app = express();
const path = require('path')
const things = require('./routes/things')
const fileUpload = require('express-fileupload')

app.use('/upload', fileUpload({
  createParentPath: true
}));

app.post('/upload', (req, res) => {
    const { inpFile } = req.files;

    inpFile.mv(path.join(__dirname, 'files', inpFile.name))
      .then(() => res.send('File uploaded!'))
      .catch(err => res.status(500).send(err));
})

Необходимо связать промежуточное программное обеспечение с приложением: 

app.use('/upload', fileUpload({
  createParentPath: true
}));

И Ваш файловый объект должен быть в req.files.inpFile.

Также вам нужно удалить заголовки из вашего запроса на выборку.

...