Отправьте файл с помощью fetch, FormData API и multer: изображение не будет загружено - PullRequest
Новая
       37

Отправьте файл с помощью fetch, FormData API и multer: изображение не будет загружено

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

Я пытаюсь отправить некоторые FormData в тело выборки, чтобы загрузить изображение с помощью multer (nodeJS).

Я попытался установить заголовок "Content-Type": "multipart/form-data" для моего вызова выборки, но когда я это делаю, у меня естьошибка nodeJS:

Ошибка: Multipart: граница не найдена

Затем я попытался удалить заголовок Content-Type, поэтому браузер установил его по умолчанию иСбой при получении, я даже не вхожу в мой маршрутизатор nodeJS.

Вот мой метод подготовки FormData: 

handleChange = event =>
{
    if(event.target.type === 'file')
    {
        const files = event.target.files;
        var formData = new FormData();

        for(var i = 0; i < files.length; i++)
        {
            formData.append('images[]', files[i], files[i].name);
        }

        //UPLOAD IMAGE METHOD
        Image.upload(formData);
    }

};

Вот мой вызов вызова: 

upload: async function(formData)
{
    return fetch('http://localhost:8080/image/upload', {
        method: 'post',
        body: formData
    })
}

и вот мой контроллер: 

const express = require('express');
const router = express.Router();
const multer = require('multer');
const upload = multer({dest: __dirname + '/uploads/images'});

router.post('/upload', upload.array('images'), (req, res) => {
    console.log('req.file', req.file, req.files, req.body);
    return res.sendStatus(200);
});

module.exports = router;

, ранее маршрутизируемый app.use('/image', require('./controllers/imageController'));, поэтому URL доступа - http://localhost:8080/image/upload

заголовок ответа без Content-Type: 

Provisional headers are shown
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryi3lc9wCsnhrvAOAB
Origin: http://localhost:3000
Referer: http://localhost:3000/backoffice/catalog/edit/5d976d6b50fd7f3d008d0f16
Sec-Fetch-Mode: cors
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
images[]: (binary)

ошибка с Content-Type:

Ошибка: Multipart: граница не найдена

Спасибо всем за мозг :)!

1 Ответ

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

Наконец, я не посмотрел на хорошее место: это был файл, который я пытался загрузить, который был поврежден. Я попробовал с другим, и он работал просто отлично.

...