Показать загруженный файл с помощью Node и Express

Question

У меня есть некоторый написанный код, который берет один файл изображения из index.html через форму HTML, добавляет к нему границу с помощью модуля gm и сохраняет его на сервере. Сейчас я пытаюсь найти способ отобразить его обратно пользователю, желательно на той же странице, на которой он был загружен.

const express = require('express');
const app = express();
const multer = require('multer');
const gm = require('gm').subClass({imageMagick: true});

app.use(express.static(__dirname + '/public'))
app.use(express.static(__dirname + '/output'))

const upload = multer({
    dest: 'temp/'
  }); 
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/public/index.html');
});

app.post('/', upload.single('file-to-upload'), (req, res) => {
  var temp = req.file['path'];
  var output = __dirname + '/output/' + req.file['filename'] + '.png'
  console.log(req.file)
  gm(temp)
  .setFormat('png')
  .resizeExact(512,512)
  .composite(__dirname + '/masks/border.png')
  .write(temp, function() {
    gm(512, 512, 'none')
    .fill(temp)
    .drawCircle(256, 256, 256, 0)
    .write(output, function(err) {
       console.log(err || 'done');
    });
  });
});

app.listen(3000);

Answer 1

Прямо сейчас ваш экспресс-маршрут никогда не отвечает, он оставляет соединение с браузером зависшим. Ключевым моментом здесь является ответ с HTML-документом. Самый ленивый способ сделать это (продолжить в конце вашей функции):

.write(output, function(err) {
  console.log(err || 'done');
  return res.send(`
    <title>My Image Is Neat!</title>
    <h1>My Image Is Neat!</h1>
    <img src="/${req.file['filename'] + '.png'}" />
  `);
});

/${req.file['filename'] + '.png'} работает, потому что вы используете express.static для отображения папки / output в корень. Возможно, вы захотите добавить /uploads в качестве первого аргумента, чтобы пути начинались с /uploads и их было бы не так легко спутать с другими вещами.

Что касается включения его на страницу, с которой они его загрузили, выможете написать функцию для отправки аналогичной строки с обратным символом для исходной формы, или вы можете стать немного менее ленивым и использовать язык шаблонов, такой как Pug или Nunjucks, чтобы разбить их на отдельные файлы.

Ваш подход до сих порподразумевается, что вы не создаете одностраничное приложение с React, Vue и т. д., а скорее создаете HTML-формы старой школы. Но если ваши реальные цели связаны с этими структурами, вам нужно изменить подход к созданию API, а не к отображению страниц.