Question

我编写了一些代码，该代码通过HTML表单从index.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

现在，您的Express路由永远不会响应，它使与浏览器的连接挂起。此处的关键是使用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而不是呈现页面的方法。

使用Node和Express显示上传的文件

1 个答案: