Здравствуйте, заранее прошу прощения за тэги, ибо не понимаю на какой стороне ошибка по данному вопросу.
Так вот. Сделал фронт на 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 при каждой попытке загрузки файлов.
Прошу памагити!!!
Средний