req.files всегда возвращает undefined с express -fileupload и body-parser

Question

Я работаю над заданием, в котором я должен загрузить файл на сервер NodeJs. Каждый раз, когда я запускаю POST-запрос на сервере, req.files всегда возвращает undefined, и я не уверен, почему. Я предполагаю, что это связано с тем, что я отправляю в теле запроса, но я не уверен, что именно мне нужно отправить. Я читал, что body-parser работает только с JSON объектами, но даже при этом сервер все равно возвращает undefined. Любые предложения?

Вот соответствующий код для файлов клиента, сервера и базы данных, с которыми я работаю:

admin. html (body):

    <div style="display: none; margin-bottom: 6%;" id="part2B">
        <label for="fileSelect2">Step 2: Upload a new image:  </label>
        <input type="file" id="fileSelect2" name="uploadFile2" value="" accept="image/*" onchange="fileSelected(event)">
    </div>

admin. html (скрипт):

       function fileLoaded(event) {
            var image = new Image();
            image.onload = imageLoaded;
            image.src = event.target.result;
            let data = document.getElementById("fileSelect2").files[0]
            fetchThemes().
            then(tableOfContents => {
                for (let theme of tableOfContents){
                    if (theme['name'] == document.getElementById("selectThemeInput").value){
                        fetch(host+'/image/:'+theme['id'], {
                            mode: 'cors',
                            method: 'POST',
                            body: JSON.stringify(data)
                        })
                    }
                }
            })
        }

сервер. js:

    // dependencies
       const fileUpload = require('express-fileupload')
       const bodyParser = require('body-parser')
       const express = require('express');
       const url = require('url');
       var cors = require('cors');

       const db = require('./db-001.js');

     //create the server
      const app = express();
      const port = 3002;


     // parse application/json
        app.use(bodyParser.json())
        app.use(cors())
        app.use(fileUpload())

      app.post('/image/:themeId', (request, response) => {
           console.log(request.files)
           let imageFile = request.files.image;
           db.saveImage(request.params.themeId)
             .then(image => {imageFile.mv('./data/' + image.name);})})

Answer 1

Вам необходимо закодировать ваши данные как «multipart / form-data» вместо «json».

Быстрый пример:

const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

const options = {
  method: 'POST',
  body: formData,
};