Почему не загружаются файлы на сервер?

Question

[dicem]

Здравствуйте, заранее прошу прощения за тэги, ибо не понимаю на какой стороне ошибка по данному вопросу.
Так вот. Сделал фронт на vue cli и для загрузки изображений использую express и express-fileupload

Форма на фронте:

ТЫК Сюда

Это собственно инпут сам

<div class="form-group">
	<label>Изображение</label>
	<input type="file" class="form-control-file" @change="handleFileUpload($event)">
</div>

А это обработчик @change

handleFileUpload(e) {
				this.file = e.target.files[0]

				this.submitFile()
			},
			submitFile() {
				fetch('http://localhost:3000/upload/', {
					method: 'post',
					body: this.file
				})
					.then( response => response.json())
					.then( success => console.log(success))
					.catch( err => console.log(err))
			}

Сервер для загрузки файлов делал по следующему уроку: https://www.youtube.com/watch?v=WLEtj-iZL3g&t=1s
Однако по ходу нашел пример по плагину express-fileupload и сделал следующий код:

Код

const express = require('express');
const fileUpload = require('../lib/index');
const app = express();

const PORT = 8000;
app.use('/form', express.static(__dirname + '/index.html'));

// default options
app.use(fileUpload());

app.get('/ping', function(req, res) {
  res.send('pong');
});

app.post('/upload', function(req, res) {
  let sampleFile;
  let uploadPath;

  if (Object.keys(req.files).length == 0) {
    res.status(400).send('No files were uploaded.');
    return;
  }

  console.log('req.files >>>', req.files); // eslint-disable-line

  sampleFile = req.files.sampleFile;

  uploadPath = __dirname + '/uploads/' + sampleFile.name;

  sampleFile.mv(uploadPath, function(err) {
    if (err) {
      return res.status(500).send(err);
    }

    res.send('File uploaded to ' + uploadPath);
  });
});

app.listen(PORT, function() {
  console.log('Express server listening on port ', PORT); // eslint-disable-line
});

Я так и не понимаю, файлы не загружаются, когда тестировал и на post ставил обычный console.log(req.files) мне приходил undefined при каждой попытке загрузки файлов.

Прошу памагити!!!

Comments

[Eugene Chefranov]

В первом коде вы отправляете на сервер с портом 3000, а втором вы принимаете файл на сервере с портом 8000. Я бы это проверил

[dicem]

Eugene Chefranov, ненене, последний код я взял из примеров на гитхабе автора плагина, там порт я поменял, с этим нет проблем

[Eugene Chefranov]

dicem, еще возможно запрещены кроссдоменные запросы. При отправке файла в консоле что-то пишет? В вкладке Network запрос отправляется?

[dicem]

Eugene Chefranov, если я правильно тебя понял, то с этим я тоже все порешал.
сдела следующее

app.use( function(req, res, next){
	res.header("Access-Control-Allow-Origin", "http://localhost:8080")
	res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
	next()
})

Answer 1

[0xD34F]

const data = new FormData();
data.append('sampleFile', this.file);

fetch('http://localhost:3000/upload/', {
  method: 'post',
  body: data,
})

UPD. Ну и не очень понятно, зачем файлу надо быть свойством компонента. Почему бы не сделать его параметром метода submitFile?

@change="submitFile($event.target.files[0])"

methods: {
  submitFile(file) {
    ...

Comments

[dicem]

Спасибо за ответ, все завелось, однако в консоли во фронте сейчас выдает не понятную мне ошибку

SyntaxError: Unexpected token F in JSON at position 0

[0xD34F]

dicem, ожидаете на клиенте json, а express отдаёт не json.

[dicem]

0xD34F, Точно! Спасибо большое.