当页面加载时,GraphicsMagick和Multer会显示一些缩略图

时间:2015-11-25 00:07:37

标签: angularjs graphicsmagick multer

我使用Multer将上传的文件存储到/ uploads /文件夹,还使用GraphicsMagick将缩略图存储在/ thumbs /中。 当我使用css在页面中显示缩略图时,它工作正常,但是当我尝试显示gm创建的缩略图时,如果有多个文件,它会偶尔失败。 这是server.js部分:

<img id="featuredIconImage348790" src="" />

没有报告错误,文件正确保存在/ uploads /和/ thumbs /中。 我尝试在var express = require('express'); var multer = require('multer'); var app = express(); var bodyParser = require('body-parser'); var morgan = require('morgan'); var mongoose = require('mongoose'); var config = require('./config'); var path = require('path'); var fs = require('fs'); var gm = require('gm'); var storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, './public/uploads/'); }, filename: function (req, file, cb) { cb(null, file.originalname); console.log('multer file originalname = ' + file.originalname); gm('./public/uploads/' + file.originalname) .resize(100, 100) .gravity("Center") .extent(100, 100) .quality(75) .noProfile() .write('./public/thumbs/' + file.originalname, function (err) { if (err) console.log(err); }); } }); var upload = multer({ storage: storage }); app.post('/', upload.array('file'), function(req, res){ res.status(204).end(); }); 上使用$ timeout来加载目标路径但没有区别。 这是display.html部分:

$location.path('/display');

就像我说的,如果我使用css将拇指显示为:

<div ng-repeat="f in display.files">
        <div id="image_thumb">
        <a ng-href="/uploads/{{f}}" target="_blank"><img src="/thumbs/{{f}}"></a>
        <br><br>
        <p id="thumbname">{{f}}</p>

没有问题,所以这是我使用(误用)gm的方式。有人可以帮忙吗。

1 个答案:

答案 0 :(得分:3)

这里的问题是当gm试图获取用于制作拇指的文件时,multer还没有完成将文件保存到/ uploads /文件夹,所以答案是将gm代码块移动到app.post函数所以gm现在只能获取存储文件,没有错误:

app.post('/', upload.array('file'), function(req, res){
    req.files.forEach(function(imageValues, key) {
        var filename = imageValues.filename;
        gm('./public/uploads/' + filename)
        .resize(100, 100)
        .gravity("Center")
        .extent(100, 100)
        .quality(75)
        .noProfile()
        .write('./public/thumbs/' + filename, function (err) {
            if (err) console.log(err);
        }); 
    });
    res.status(204).end();
});