dicem
@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 при каждой попытке загрузки файлов.

Прошу памагити!!!
  • Вопрос задан
  • 87 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
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])"

submitFile(file) {
  ...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы